我们需要在元素中添加复选框选中总数计数值。
但是当我们选中“标题 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);
});
});
最佳答案
尝试使用 this
引用来查找选择器的上下文。我使用 closest(".row")
来查找此处的上下文。之后,我们必须选择找到的上下文中选中的复选框并更新值。
$(document).ready(function() {
$(":checkbox").change(function() {
var closest = $(this).closest("div.row");
var countCheckedCheckboxes = $(":checkbox", closest).filter(':checked').length;
$('.count-checked-checkboxes', closest).text(countCheckedCheckboxes);
$('#edit-count-checked-checkboxes').val(countCheckedCheckboxes);
});
});
DEMO
此外,ID 在整个文档中必须是唯一的。但在我们的上下文中,这并不妨碍您看到预期的结果。不要忘记,Id 始终必须是唯一的。我在你的 html 中发现了 2 个不同的 id。更正一下。
关于javascript - 如何统计复选框选中值的总数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36457097/