如何添加复选框选中的计数值
How to add check box checked count value
我需要添加元素中复选框检查计数值的总数。
但当我选中"标题2"部分的复选框时，计数值被添加到了"标题1"部分。
我没有发现任何一个问题请指导我解决这个问题
演示
HTMl:
<div id="main">
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><a href="" data-toggle="collapse" data-target="#Actuarial-collapse"><span class="glyphicon ecm-caret-right"></span></a>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><a href="" data-toggle="collapse"><span class="glyphicon ecm-caret-right"></span></a>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><a href="" data-toggle="collapse"><span class="glyphicon ecm-caret-right"></span></a>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 2</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><a href="" data-toggle="collapse" data-target="#Actuarial-collapse"><span class="glyphicon ecm-caret-right"></span></a>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><a href="" data-toggle="collapse"><span class="glyphicon ecm-caret-right"></span></a>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><a href="" data-toggle="collapse"><span class="glyphicon ecm-caret-right"></span></a>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var $checkboxes = $(
'#main ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('.count-checked-checkboxes').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes').val(
countCheckedCheckboxes);
});
});
查看工作解决方案。记住Id必须是唯一的，尽可能避免使用Id，比如将输入元素放入标签中，而不是与Id 一起使用
$(document).ready(function() {
var $checkboxes1 = $('#head1 ul input[type="checkbox"]');
var $checkboxes2 = $('#head2 ul input[type="checkbox"]');
$checkboxes1.change(function() {
var countCheckedCheckboxes = $checkboxes1.filter(':checked').length;
$('#head1 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
$checkboxes2.change(function() {
var countCheckedCheckboxes = $checkboxes2.filter(':checked').length;
$('#head2 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="head1">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 -b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a" id="head2">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 - b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
</div>看看这是否有效。
忽略了其他人提到的所有内容，关于ID需要是唯一的等等，我能够使用DOM遍历来统计每个标题的复选框。
我将jQuery更改为：
$(document).ready(function() {
$('.a').each(function(){
var $checkboxes = $(this).find('input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$(this).closest('.a').find('.count-checked-checkboxes').text(
countCheckedCheckboxes);
});
});
});
- 循环遍历每个元素".a"
- 使用$（this）.find（'input[type="checkbox"]'）；只获取相关的复选框
- 更改时，向上遍历DOM，直到找到".a"，然后向下遍历并找到标题类".count checked checkbox"
不过可能还有更好的方法。
.closest（）从当前元素开始，向上移动以查找匹配项。
.find（）向下遍历子体。
两件事。
j08691是对的，ID必须是唯一的。浏览器正在获取第一个#count-checked-checkboxes并填充该值。
此外，您将获得所有复选框的计数，该计数将统计所有复选框，无论它们在中是哪个div
我建议如下：
$(document).ready(function() {
var $checkboxes = $(
'.a ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-a').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-a').val(
countCheckedCheckboxes);
});
});
但你仍然得到了所有的复选框。此时，我会将您的第二个<div class="a">更改为<div class="b">，然后重复上面的语句，如下所示：
$(document).ready(function() {
var $checkboxes = $(
'.b ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-b').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-b').val(
countCheckedCheckboxes);
});
});
当然，还要更改您的ID以匹配jquery中的ID。
https://jsfiddle.net/gqcgwjq2/28/
相关文章：
- Bootstrap多选-在复选框后添加图像
- 通过选中和取消选中复选框来添加和删除数组中的值
- 如何在使用onclick函数选中复选框时添加或减去值
- 如何在复选框后添加文本
- 如何将jquery数组添加到html表单中，以将复选框动态添加到对话框中
- 将复选框动态添加到 jquery dilaogue 框中
- 从复选框中添加/减去值
- 在 extjs4 中编辑时需要对齐复选框、添加多条记录并查看日期归档
- 将可绑定复选框列添加到 Internet Explorer 中的网格
- 键:选中复选框时添加一个值
- 向复选框属性添加数字并限制选中复选框的数量
- php在选中复选框时添加文本框不会发布
- 如何仅在选中复选框时添加值
- 如何在Quit复选框中添加事件
- 复选框 - 选中添加文本，取消选中删除文本区域中的原始文本
- 在复选框上添加动态行和数据单击
- 在Javascript中从复选框中添加/删除字段值
- 在显示/隐藏复选框中添加动画
- Javascript:在现有的复选框旁边添加一个额外的复选框
- 在隐藏复选框上添加更改事件
