jQuery 计算下一个元素中选中的复选框
jQuery count checked checkbox in next element
我的示例计算页面上的每个复选框。 如何使用 jQuery 计算 next/sibling 元素上选中的复选框?
PS:我希望它可以在一个页面上处理多个表单而不调用元素(表单)ID。
$(document).ready(function() {
function countChecked() {
var tCount = $("input:checked").length;
$(".totalchecked").text( tCount + ' selected');
}
countChecked();
var tCheck = $(".totalchecked");
$(tCheck).next().find(":checkbox").click(countChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>form 1:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="1">
<input type="checkbox" class="class" name="2">
<input type="checkbox" class="class" name="3">
</div>
</div>
<div>form 2:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="4">
<input type="checkbox" class="class" name="5">
<input type="checkbox" class="class" name="6">
</div>
</div>
/*更新*/
我想要这样的东西。
$('input[type=checkbox]').change(function() {
var siblingsChecked = [];
$(this).siblings().each(function(el){
if($(this).is(':checked')) {
siblingsChecked.push(el);
}
});
console.log(siblingsChecked.length);
});
希望对您有所帮助!
检查这个工作示例:
function checkTotalCheckedBoxes(){
$("div" ).each(function( ) {
if(this.children.length === 3){
var checked = 0;
$(this.children).each(function() {
this.checked ? checked++ : null;
$("input[name="+this.name+"]").parent().siblings().closest('.totalchecked')[0].innerText = (checked) + " selected";
});
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>form 1:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="1" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="class" name="2" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="class" name="3" onclick="checkTotalCheckedBoxes()">
</div>
</div>
<div>form 2:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="4" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="class" name="5" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="class" name="6" onclick="checkTotalCheckedBoxes()">
</div>
</div>
这是我自己的解决方案,希望对大家有所帮助。
$( document ).ready(function() {
var $SelectCount = $("input:checkbox")
$SelectCount.change(function(){
var countChecked = $(this).parent().find("input:checkbox").filter(':checked').length;
$(this).parent().siblings(".totalchecked").text(countChecked + " Selected");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>form 1:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="1">
<input type="checkbox" class="class" name="2">
<input type="checkbox" class="class" name="3">
</div>
</div>
<div>form 2:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="4">
<input type="checkbox" class="class" name="5">
<input type="checkbox" class="class" name="6">
</div>
</div>
$(document).ready(function() {
function countChecked() {
var tCount = $("input:checked").length;
$(".totalchecked").text( tCount + ' selected');
}
countChecked();
var tCheck = $(".totalchecked");
$(tCheck).next().find(":checkbox").click(countChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>form 1:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="1">
<input type="checkbox" class="class" name="2">
<input type="checkbox" class="class" name="3">
</div>
</div>
<div>form 2:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="4">
<input type="checkbox" class="class" name="5">
<input type="checkbox" class="class" name="6">
</div>
</div>
我的示例计算页面上的每个复选框。 如何使用 jQuery 计算 next/sibling 元素上选中的复选框?
PS:我希望它可以在一个页面上处理多个表单而不调用元素(表单)ID。
$(document).ready(function() {
function countChecked() {
var tCount = $("input:checked").length;
$(".totalchecked").text( tCount + ' selected');
}
countChecked();
var tCheck = $(".totalchecked");
$(tCheck).next().find(":checkbox").click(countChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>form 1:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="1">
<input type="checkbox" class="class" name="2">
<input type="checkbox" class="class" name="3">
</div>
</div>
<div>form 2:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="4">
<input type="checkbox" class="class" name="5">
<input type="checkbox" class="class" name="6">
</div>
</div>
/*更新*/
我想要这样的东西。
$('input[type=checkbox]').change(function() {
var siblingsChecked = [];
$(this).siblings().each(function(el){
if($(this).is(':checked')) {
siblingsChecked.push(el);
}
});
console.log(siblingsChecked.length);
});
希望对您有所帮助!
检查这个工作示例:
function checkTotalCheckedBoxes(){
$("div" ).each(function( ) {
if(this.children.length === 3){
var checked = 0;
$(this.children).each(function() {
this.checked ? checked++ : null;
$("input[name="+this.name+"]").parent().siblings().closest('.totalchecked')[0].innerText = (checked) + " selected";
});
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>form 1:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="1" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="class" name="2" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="class" name="3" onclick="checkTotalCheckedBoxes()">
</div>
</div>
<div>form 2:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="4" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="class" name="5" onclick="checkTotalCheckedBoxes()">
<input type="checkbox" class="class" name="6" onclick="checkTotalCheckedBoxes()">
</div>
</div>
这是我自己的解决方案,希望对大家有所帮助。
$( document ).ready(function() {
var $SelectCount = $("input:checkbox")
$SelectCount.change(function(){
var countChecked = $(this).parent().find("input:checkbox").filter(':checked').length;
$(this).parent().siblings(".totalchecked").text(countChecked + " Selected");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>form 1:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="1">
<input type="checkbox" class="class" name="2">
<input type="checkbox" class="class" name="3">
</div>
</div>
<div>form 2:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="4">
<input type="checkbox" class="class" name="5">
<input type="checkbox" class="class" name="6">
</div>
</div>
$(document).ready(function() {
function countChecked() {
var tCount = $("input:checked").length;
$(".totalchecked").text( tCount + ' selected');
}
countChecked();
var tCheck = $(".totalchecked");
$(tCheck).next().find(":checkbox").click(countChecked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>form 1:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="1">
<input type="checkbox" class="class" name="2">
<input type="checkbox" class="class" name="3">
</div>
</div>
<div>form 2:
<div class="totalchecked">0 selected</div>
<div>
<input type="checkbox" class="class" name="4">
<input type="checkbox" class="class" name="5">
<input type="checkbox" class="class" name="6">
</div>
</div>