如何解决如何将多个复选框中的数据价格值相加到现有功能？
我试图将多个可选复选框添加到我的html表单中，以便如果选中该复选框，则其数据价格值将添加到总和中。
问题是我只能让第一个选定的复选框添加到其他输入类型，而不能同时添加到其他输入类型。 任何帮助都将非常棒。
<body>
<form id="form1">
<div id=go>
<label><input type="radio" name="colorRadio" value="one" class="abc" data-price="1600">Live Band</label>
<label><input type="radio" name="colorRadio" value="two" class="abc" data-price="400">DJ</label>
<label><input type="radio" name="colorRadio" value="three" class="abc" data-price="500">Acoustic</label>
</div>
<div id="example" class="container">
<select id="place">
<option value="">pick</option>
<option value="a" data-price="100" >a</option>
<option value="b" data-price="200">b</option>
<option value="c" data-price="300">c</option>
</select>
</div>
<div id="checker">
<input type="checkbox" name="add-ons" id="add-dj" data-price="750">
<input type="checkbox" name="add-ons" id="add-acoustic-wedding-music" data-price="450">
</div>
</form>
<div id="result" class="container"></div>
<script> $(document).ready(function(){
function validate() {
var sum = 0;
sum += +$('#go input:checked').data('price') || 0;
sum += +$('#place option:selected').data('price') || 0;
sum += +$('#checker input:checked').data('price') || 0;
$('#result').html(sum === 0 ? '' : sum + '$');
}
validate();
$('#go input,#place,#checker input').on('change',function() {
validate();
});
});
</script>
</body>
解决方法
您可以使用每个循环遍历checked复选框，然后可以使用$(this).data('price')并将其添加到sum。
演示代码 ：
$(document).ready(function() {
function validate() {
var sum = 0;
sum += +$('#go input:checked').data('price') || 0;
sum += +$('#place option:selected').data('price') || 0;
//loop through checked checkbox
$('#checker input:checked').each(function() {
sum += +$(this).data('price') //get dataprice add in sum
})
$('#result').html(sum === 0 ? '' : sum + '$');
}
validate();
$('#go input,#place,#checker input').on('change',function() {
validate();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="form1">
<div id=go>
<label><input type="radio" name="colorRadio" value="one" class="abc" data-price="1600">Live Band</label>
<label><input type="radio" name="colorRadio" value="two" class="abc" data-price="400">DJ</label>
<label><input type="radio" name="colorRadio" value="three" class="abc" data-price="500">Acoustic</label>
</div>
<div id="example" class="container">
<select id="place">
<option value="">pick</option>
<option value="a" data-price="100">a</option>
<option value="b" data-price="200">b</option>
<option value="c" data-price="300">c</option>
</select>
</div>
<div id="checker">
<input type="checkbox" name="add-ons" id="add-dj" data-price="750">
<input type="checkbox" name="add-ons" id="add-acoustic-wedding-music" data-price="450">
</div>
</form>
<div id="result" class="container"></div>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。