總計分數並添加到分級結果中

我有一個評分表，允許個人評分，然後放入評分組，但我很難弄清楚如何用jQuery或JavaScript完成此操作。總計分數並添加到分級結果中

例如，我的表單的第一部分具有此結構，其中應將每個組的總計寫入字段。

<input id="Food1" name="Food" type="radio" value="5" /> 
<input id="Food2" name="Food" type="radio" value="10" /> 
<input id="Food3" name="Food" type="radio" value="15" /> 

<input id="Drink1" name="Drink" type="radio" value="5" /> 
<input id="Drink2" name="Drink" type="radio" value="10" /> 
<input id="Drink3" name="Drink" type="radio" value="15" /> 

<input name="CombinedScore" type="text" />

第二部分應檢查組合分數的值並將其放置在適當的組中。例如

<input id="FoodDrinkGroup1" name="FoodDrinkGroup" type="radio" value="1-10" /> 
<input id="FoodDrinkGroup2" name="FoodDrinkGroup" type="radio" value="11-20" /> 
<input id="FoodDrinkGroup3" name="FoodDrinkGroup" type="radio" value="21-30" />

因此，如果有人得分10對食物和15飲料，它們應該被添加到21-30FoodDrinkGroup。

在所有我有這樣的三個組，但我希望如果我能爲它工作，我應該能夠應用相同的代碼到其餘的。

來源

2011-06-09 Willb

使用類物品的不同羣體將使得選擇更簡潔，但即使有這樣的標記，你可以做這樣的

$(function() { 
    // Part 1 
    var sum = parseInt($('input[name="Food"]:checked').attr('value')); 
    sum += parseInt($('input[name="Drink"]:checked').attr('value')); 
    $('input[name="CombinedScore"]').val(sum); 

    //Part 2 
    $('input[name="FoodDrinkGroup"]').each(function(i, elem) { 
     var range = $(elem).attr('value').split('-'); 
     if (sum >= range[0] && sum <= range[1]) { 
      $(elem).attr('checked', true); 
     } 
    }); 
});

JSFiddle

來源

2011-06-09 11:13:35 mkilmanas

我相信你應該總結前parseInt函數（值）。否則，他們是字符串。 – tiagoboldt 2011-06-09 11:15:38

你是對的。相應更新 – mkilmanas 2011-06-09 11:19:20

謝謝 - 這完美的作品和小提琴+1！ – Willb 2011-06-09 11:36:59

請看下面的功能，似乎是工作。看到這裏的工作活生生的例子 - http://jsfiddle.net/YUwUG/

function proc() { 

    food = $('input[name=Food]:checked').val(); 
    drink = $('input[name=Drink]:checked').val(); 

    combined = parseInt(food) + parseInt(drink); 

    $("#combined").val(combined); 

    if (combined < 11) { 
     $('#FoodDrinkGroup1').attr('checked', 'checked'); 
    } else if (combined < 21) { 
     $('#FoodDrinkGroup2').attr('checked', 'checked'); 
    } else if (combined < 31) { 
     $('#FoodDrinkGroup3').attr('checked', 'checked'); 
    } 

}

來源

2011-06-09 11:20:30

感謝您的建議，但不幸的是我無法得到這個工作... – Willb 2011-06-09 11:38:30

a）你的小提琴缺乏「javascript 「部分; b）在主html代碼中沒有定義「＃combined」; c）在最後一個'if'之前你缺少'else'，因此最後一個組總是被選中 – mkilmanas 2011-06-09 11:39:13

啊，不知道，代碼GO在哪裏消失了。無論如何，謝謝你指出其他。 – 2011-06-09 11:43:53

有點晚了，但想到我會展示我公司生產的代碼。這只是使用一點數學來確定什麼組，以及它應該選擇什麼元素索引。

var total = 0; 

$('input[name=Food]:checked, input[name=Drink]:checked') 
.each(function() { 
    total += parseInt(this.value); 
}); 

var index = parseInt(total/11); 

$('[name=CombinedScore]').val(total); 

$('input[name=FoodDrinkGroup]').eq(index).prop('checked', true);

工作現場小提琴：http://jsfiddle.net/garreh/5j7Jd/

來源

2011-06-09 12:08:43

感謝這個例子。我嘗試了這一點，是的，它在這個例子中有效，但是如果範圍從5,10,15增加到1到12，它不能準確地評分。這不是原始問題的一部分，所以在這種情況下，你的解決方案效果很好 – Willb 2011-06-10 11:29:28

如果它們增加5，則改變'var index = parseInt（total/6）;' - 顯然這種技術依賴於它們是你的範圍的數學模式，所以mkilmanas技術雖然更長，但是更通用。 – 2011-06-10 11:53:14

總計分數並添加到分級結果中

回答

相關問題