我需要在元素中添加复选框检查计数值的总数。
但当我选中"标题2"中的复选框时部分,计数值被添加到"标题1和#34;部分。
我没有找到任何问题,请指导我解决这个问题
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);
});
});
答案 0 :(得分:0)
查看工作解决方案。记住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);
});
});
&#13;
<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>
&#13;
答案 1 :(得分:0)
查看是否this works。
忽略其他人提到的一切,关于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);
});
});
});
虽然可能有更好的方法。
.closest()从当前元素开始向上移动以寻找匹配。
.find()向下穿过后代。
答案 2 :(得分:-1)
夫妻俩。
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。