jQuery 复选框并选择 - 对值求和并添加 var [英] jQuery checkbox and select - sum the values and add in var
问题描述
解释在代码下面:
HTML 的代码是:
<div id="container"><h1>附加组件</h1><input type="checkbox" name="ch1" value="10" id="qr1"/>Add-on Number 1 - 10 QR <br/><input type="checkbox" name="ch1" value="20" id="qr1"/>Add-on Number 2 - 20 QR <br/><input type="checkbox" name="ch1" value="40" id="qr1"/>Add-on Number 3 - 40 QR <br/><input type="checkbox" name="ch1" value="60" id="qr1"/>附加号码 4 - 60 QR <br/>
<div>我想要更多附加组件<select id="more" name="more"><option value="0 QR">0</option><option value="30 QR">1</option><option value="50 QR">2</option><option value="100 QR">3</option></选择><span id="span"></span>用户总使用量:</span> jQuery: 我希望用户总使用量:创建复选框的总和并添加选项的值,以便如果我选择复选框 1 和 2 加上选项 1,我将写入用户总使用量:60. 我创建了一个 fiddle 用于您的代码. 希望这是你想要的. HTML://用于选择函数 displayVals() {var singleValues = $("#more").val();$("#span").html("<b>更多插件:</b>" +单值);}$("select").change(displayVals);显示值();//对于复选框var $cbs = $('input[name="ch1"]');$cbs.click(function() {无功总计 = 0;$cbs.each(function() {如果(this.checked)var singleValues = $("#more").val();总计 += +this.value + singleValues;});$("#usertotal").text(total);});
<div id="container"><h1>附加组件</h1><input type="checkbox" name="ch1" value="10" id="qr1"/>Add-on Number 1 - 10 QR <br/><input type="checkbox" name="ch1" value="20" id="qr1"/>Add-on Number 2 - 20 QR <br/><input type="checkbox" name="ch1" value="40" id="qr1"/>Add-on Number 3 - 40 QR <br/><input type="checkbox" name="ch1" value="60" id="qr1"/>附加号码 4 - 60 QR <br/>
<div>我想要更多附加组件<select id="more" name="more"><option value="0">0</option><option value="30">1</option><option value="50">2</option><option value="100">3</option></选择><span id="span"></span>用户总使用量:</span> Javascript: The explanation is below the code: The code for HTML is : jQuery: I want the user total usage: to create the sum of the checkboxes and add the value of the option so that if I select checkbox 1 and 2 plus option 1 I will have written in user total usage: 60. I've created a fiddle for your code. Hope this is what you wanted. HTML: Javascript:
这篇关于jQuery 复选框并选择 - 对值求和并添加 var的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!function displayVals() {calcUsage();var singleValues = $("#more").val();$("#span").html("<b>更多插件:</b>" +单值 + 'QR');}var $cbs = $('input[name="ch1"]');函数 calcUsage() {var total = $("#more").val();$cbs.each(function() {如果(this.checked)总计 = parseInt(total) + parseInt(this.value);});$("#usertotal").text(total + 'QR');}$("select").change(displayVals);显示值();//对于复选框$cbs.click(calcUsage);
<div id="container"><h1>Add-ons</h1>
<input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br />
<input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br />
<input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br />
<input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br />
</div>
<div> I want more add-ons
<select id="more" name="more">
<option value="0 QR">0</option>
<option value="30 QR">1</option>
<option value="50 QR">2</option>
<option value="100 QR">3</option>
</select>
<span id="span"></span>
User total usage: <span id="usertotal"> </span>
//For select
function displayVals() {
var singleValues = $("#more").val();
$("#span").html("<b>more addons:</b> " +
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);
});
<div id="container"><h1>Add-ons</h1>
<input type="checkbox" name="ch1" value="10" id="qr1" />Add-on Number 1 - 10 QR <br />
<input type="checkbox" name="ch1" value="20" id="qr1" />Add-on Number 2 - 20 QR <br />
<input type="checkbox" name="ch1" value="40" id="qr1" />Add-on Number 3 - 40 QR <br />
<input type="checkbox" name="ch1" value="60" id="qr1" />Add-on Number 4 - 60 QR <br />
</div>
<div> I want more add-ons
<select id="more" name="more">
<option value="0">0</option>
<option value="30">1</option>
<option value="50">2</option>
<option value="100">3</option>
</select>
<span id="span"></span>
User total usage: <span id="usertotal"> </span>
function displayVals() {
calcUsage();
var singleValues = $("#more").val();
$("#span").html("<b>more addons:</b> " +
singleValues + ' QR');
}
var $cbs = $('input[name="ch1"]');
function calcUsage() {
var total = $("#more").val();
$cbs.each(function() {
if (this.checked)
total = parseInt(total) + parseInt(this.value);
});
$("#usertotal").text(total + ' QR');
}
$("select").change(displayVals);
displayVals();
//For checkboxes
$cbs.click(calcUsage);