下一个元素中的 jQuery 计数选中复选框

Posted 2023-02-25

【中文标题】下一个元素中的 jQuery 计数选中复选框

【英文标题】：jQuery count checked checkbox in next element

【发布时间】：2018-09-23 17:24:34

【问题描述】：

我的示例是计算页面上的每个复选框。 如何使用 jQuery 计算下一个/兄弟元素上选中的复选框？

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>

/* 更新 */ 我想要这样的东西。

【问题讨论】：

请确定，您的问题应该清楚明白

【参考方案1】：

检查此工作示例：

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>

【讨论】：

我更新了我的问题，使其更加清晰。每个“（.totalchecked）”应该只计算下一个/兄弟元素上选中的复选框。

是否可以为任何 div 表单添加 id 或类名？这样会更容易识别特定的形式吗？@CocoSkin

想法是不调用元素ID。我在 CMS 插件上使用它。

@CocoSkin 请立即运行示例。我做了一些 js 更新，希望这个基本示例对您来说足够好，因此您可以根据需要更新更多内容。

这很棒。我会将脚本更新为更像这样。函数 checkTotalCheckedBoxes() $(".totalchecked + div" ).each(function() var checked = 0; $(this.children).each(function() this.checked ? checked++ : null; $(" input[name="+this.name+"]").parent().siblings().closest('.totalchecked')[0].innerText = (checked) + " selected"; ); );

【参考方案2】：

$('input[type=checkbox]').change(function() 
        var siblingsChecked = [];
           $(this).siblings().each(function(el)
                if($(this).is(':checked')) 
                    siblingsChecked.push(el);
                
          );
        console.log(siblingsChecked.length);
    );

希望对你有帮助！

【参考方案3】：

这是我自己的解决方案，希望对某人有所帮助。

$( 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>