Jquery多个复选框在var中获取值或在span中打印

html的代码是:

Add-ons

Add-on Number 1 - 10 QR
Add-on Number 2 - 20 QR
Add-on Number 3 - 40 QR
Add-on Number 4 - 60 QR
I want more add-ons 0 1 2 3 User total usage:

jQuery的:

 //For select function displayVals() { var singleValues = $("#more").val(); $("#span").html("more addons: " + singleValues); } $("select").change(displayVals); displayVals(); //For checkboxes var $cbs = $('input[name="ch1"]'); $cbs.click(function() { var total = 0; $cbs.each(function() { if (this.checked) var singleValues = $("#more").val(); total += +this.value + singleValues; }); $("#usertotal").text(total); }); 

我想要用户总使用量:创建复选框的总和并添加选项的值,这样如果我选择1复选框和2加选项1,我将写入用户总使用量:60。 先感谢您 !

工作演示: http //jsfiddle.net/GNDAG/

希望能帮助到你。 您可以在这里阅读更多相关信息。

但是,就像@nnnnnn提到的那样,你的html不对 – ID属性需要是唯一的。

 $('input[type="checkbox"]').change(function() { var total_span = 0; $('input[type="checkbox"]').each(function() { if ($(this).is(':checked')) { total_span += parseInt($(this).prop('value'), 10); } }); $("#usertotal").html(total_span); });​ 

请注意,对多个元素使用相同的id是无效的html。 使用其name属性选中复选框。 单击任何复选框循环遍历所有,并添加任何已选中的值。 请注意,值需要转换为数字,我使用一元加运算符。

 var $cbs = $('input[name="ch1"]'); $cbs.click(function() { var total = 0; $cbs.each(function() { if (this.checked) total += +this.value; }); $("#usertotal").text(total); });​ 

演示: http : //jsfiddle.net/6GX7g/

干得好:

工作演示jsfiddle

HTML:

 

Add-ons

Add-on Number 1 - 10 QR
Add-on Number 2 - 20 QR
Add-on Number 3 - 40 QR
Add-on Number 4 - 60 QR
User total usage:

jQuery的/ JavaScript的:

  var getCheckedBoxValues = function() { var values = [] $(".numbers:checked").each(function() { values.push($(this).val()); }); return values; }; $('.numbers').click(function () { $('#usertotal').html(); var usertotal = 0; var values = getCheckedBoxValues(); for(i = 0; i < values.length; i++) { usertotal += parseInt(values[i]); } $('#usertotal').html(usertotal); }); 
 try it: $('input:checkbox').change(function(){ var tot=0; $('input:checkbox:checked').each(function(){ tot+=parseInt($(this).val()); }); $('#usertotal').html(tot) });