使用jquery选中/取消选中复选框添加/删除值
Adding/removing value on checkbox checked/unchecked using jquery
我正在尝试列出一个选项列表，供用户选择以获取报价，例如：
- 香蕉检查
- 苹果检查
- 饼干未检查
- 卡纸检查
每个选项的价值香蕉 3 美元、苹果 2 美元、饼干 11 美元、果酱 1 美元。
以上示例的总计 $4 + $2 + $1.20 = $7.20（不需要饼干）
我希望在选中/取消选中复选框时更新总数。如果我要添加更多选项，这些值似乎没有添加，我的代码似乎很长。
我的代码 http://codepen.io/Perk/pen/azpzWK
正如你可能知道的那样，我对JavaScript/jQuery非常陌生。
目录：
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
<label for="checkbox4" class="css-label">jam </label><br>
<p>Total Cost: $<span id="total"></span></p>
脚本：
$total = "";
// Banana $4
$('#checkbox1').click(function(){
if (this.checked) {
$total =+ 4;
$('#total').html( $total );
}
})
// Apple $2
$('#checkbox2').click(function(){
if (this.checked) {
$total =+ 2;
$('#total').html( $total );
}
})
// Biscuit $11
$('#checkbox3').click(function(){
if (this.checked) {
$total =+ 11;
$('#total').html( $total );
}
})
// Jam $1
$('#checkbox4').click(function(){
if (this.checked) {
$total =+ 1;
$('#total').html( $total );
}
})
他们没有添加，因为您使用的是$total =+ n而不是$total += n。将$total值设置为每次指定的值。 $total =+ 11会将$total设置为 +11（计算结果为数字 11）。
要修复它，只需将=+更改为+=：
if (this.checked) {
$total += 11;
$('#total').html( $total );
}
更整洁的解决方案
更好的解决方案是将每个值添加为标记中的复选框值。例如：
<input type="checkbox" ... value="11" />
然后仅使用一个change事件来处理所有情况：
$('input:checkbox').on('change', function() {
if (this.checked)
$total += +this.value;
else
$total -= +this.value;
$('#total').html($total);
});
演示
var $total = 0;
$('input:checkbox').on('change', function() {
if (this.checked)
$total += +this.value;
else
$total -= +this.value;
$('#total').html($total);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="4" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="2" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="11" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="1" />
<label for="checkbox4" class="css-label">jam </label><br>
<p>Total Cost: $<span id="total">0</span></p>- += 不是 =+
- 将总计初始化为 0 ，而不是 "。cos 然后 += 将作为串联执行。
-
您还必须考虑取消选中操作。
var $total = 0; $('#checkbox1').click(function(){ if (this.checked) { $total += 4; $('#total').html( $total ); } else{ $total -= 4; $('#total').html( $total ); } })
use parseintparseInt（） 函数解析字符串参数并返回一个整数使用选中和未选中的代码进行演示
$total = 0;
// Banana $4
$('#checkbox1').click(function(){
if (this.checked) {
$total =parseInt($total+ 4);
$('#total').html( $total );
}else{
$total =parseInt($total- 4);
$('#total').html( $total );
}
})
// Apple $2
$('#checkbox2').click(function(){
if (this.checked) {
$total =parseInt($total+ 2);
$('#total').html( $total );
}else{
$total =parseInt($total- 2);
$('#total').html( $total );
}
})
// Biscuit $11
$('#checkbox3').click(function(){
if (this.checked) {
$total =parseInt($total+ 11);
$('#total').html( $total );
}else{
$total =parseInt($total- 11);
$('#total').html( $total );
}
})
// Jam $1
$('#checkbox4').click(function(){
if (this.checked) {
$total =parseInt($total+ 1);
$('#total').html( $total );
}else{
$total =parseInt($total- 1);
$('#total').html( $total );
}
}) /*Check box*/
input[type=checkbox].css-checkbox {
position:absolute; z-index:-1000;
left:-1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height:1px;
width:1px;
margin:-1px;
padding:0;
border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
padding-left:27px;
height:22px;
display:inline-block;
line-height:22px;
background-repeat:no-repeat;
background-position: 0 0;
font-size:22px;
vertical-align:middle;
cursor:pointer;
margin-top: 15px;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -22px;
}
label.css-label {
background-image:url(http://csscheckbox.com/checkboxes/u/csscheckbox_1470d2ed405eb6fa12570883c6b38297.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" />
<label for="checkbox1" class="css-label">banana</label><br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" />
<label for="checkbox2" class="css-label">apple</label><br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" />
<label for="checkbox3" class="css-label">biscuit</label><br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" />
<label for="checkbox4" class="css-label">jam </label><br>
<p>Total Cost: $<span id="total"></span></p>试试这个优化的代码：
代码笔
$total = 0;
var fruit = {
jam: 1,
banana: 4,
biscuit: 11,
apple: 2
}
$('input[type="checkbox"]').click(function() {
if (this.checked) {
$total += fruit[$(this).data("type")] || 0;
$('#total').html($total);
} else {
$total -= fruit[$(this).data("type")] || 0;
}
})<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" data-type="banana" />
<label for="checkbox1" class="css-label">banana</label>
<br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" data-type="apple" />
<label for="checkbox2" class="css-label">apple</label>
<br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" data-type="biscuit" />
<label for="checkbox3" class="css-label">biscuit</label>
<br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" data-type="jam" />
<label for="checkbox4" class="css-label">jam</label>
<br>
<p>Total Cost: $<span id="total"></span>
</p>它应该适合您的需求
您可以通过向 HTML 添加 value 属性来干涸您的逻辑：
<input type="checkbox" name="checkbox1" id="checkbox1" class="css-checkbox" value="4" />
<label for="checkbox1" class="css-label">banana</label>
<br>
<input type="checkbox" name="checkbox2" id="checkbox2" class="css-checkbox" value="2" />
<label for="checkbox2" class="css-label">apple</label>
<br>
<input type="checkbox" name="checkbox3" id="checkbox3" class="css-checkbox" value="11" />
<label for="checkbox3" class="css-label">biscuit</label>
<br>
<input type="checkbox" name="checkbox4" id="checkbox4" class="css-checkbox" value="1" />
<label for="checkbox4" class="css-label">jam</label>
<br>
<p>Total Cost: $<span id="total">0</span></p>
然后在 Javascript 中，您可以为每个复选框使用相同的单击处理程序。这将对每次单击时每个复选框的值求和，以确保不会遗漏任何值。
$('.css-checkbox').click(function() {
var values = $('.css-checkbox:checked').map(function() {
return parseInt(this.value, 10);
}).get();
$('#total').html(values.reduce(function(p, c) { return p + c; }, 0));
});
示例小提琴
相关文章：
- 动态添加复选框和输入框 jQuery
- 在输入类型数字更改时添加复选框
- 添加复选框标签中的值
- 在表中搜索相同的日期，并在td中添加复选框
- 想要添加复选框到动态创建的李
- 如何添加复选框选中的计数值
- 在PHP结果中添加复选框，并在一段时间后使用java逐个打开它们
- 使用JavaScript添加复选框值PHP、MySQL和alertbox
- 在运行时添加复选框并将其保存在 HTML 文件代码中
- 如何使用 javascript 添加复选框
- 在 AngularJS 中添加复选框以进行搜索
- Bootstrap 3.2:当使用jQuery添加复选框时，它不会在正确的css上可见
- 如何在提交按钮之前添加复选框
- extjs3.4如何在工具栏中动态添加复选框
- 如何在嵌入php的html表中为每一行添加复选框，并在数据库(Postgresql）中更新其值
- 在谷歌可视化栏旁边添加复选框
- 使用JS添加复选框，并在服务器端代码(ASP.NET）中找到它
- 动态添加复选框时，组中一个复选框选择的 JQuery 脚本不起作用
- 动态添加复选框，而不是模型绑定到IList
- 基于数组值javascript动态添加复选框
