JQuery 在不同的类上运行

Posted 2023-05-08

【中文标题】JQuery 在不同的类上运行

【英文标题】：JQuery running on different classes

【发布时间】：2020-10-04 01:35:01

【问题描述】：

我正在尝试计算用户检查了多少复选框，以便我可以禁用其他输入，以便它进入数据库。我如何在不同的元素上运行 $(" . ") 使用不同类的数组，因为我的表单中有几组输入。

 <script>
                var countChecked = function() 
                var n = $( ".neutral:checked" ).length;
                alert( n + (n === 1 ? " is" : " are") + " checked!" );
                ;
                countChecked();

                $( "input[type=checkbox]" ).on( "click", countChecked );

   </script>

【参考方案1】：

// Count ALL checked boxes.
console.log($(":checked").length)

// Count checkboxes for a set of given classes.
console.log($(".one, .two, .three, .four").filter(":checked").length)

// Or given as array
let targets = [".one", ".two", ".three", ".four"];
console.log($(targets.join(",")).filter(":checked").length)

// or without the dot
targets = ["one", "two", "three", "four"];
console.log($(targets.map(x => `.$x`).join(",")).filter(":checked").length)

// or if you want to do something separately for each class
const handleCheckboxes = (cls) => 
  var n = $(`.$cls:checked`).length;
  console.log(`$n of class $cls $n === 1 ? "is" : "are" checked!`);

  // do even more stuff here
;
targets.forEach(handleCheckboxes);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="one" type="checkbox" checked>

<input class="two" type="checkbox" checked>
<input class="two" type="checkbox" checked>
<input class="two" type="checkbox" checked>

<input class="three" type="checkbox">
<input class="three" type="checkbox">

<input class="four" type="checkbox" checked>
<input class="four" type="checkbox">

【讨论】：

我对每个类都有一些输入，我需要返回每个类的选中项的数量，以便我可以从同一个类的表单的其他输入标签中删除禁用。

所以你想单独做一个类列表？

是的，但我需要返回 count var，以便在 if 语句中将其用于此类的其他输入

检查我的建议。

我只需要将选中复选框的数量返回到 php 标记中的 var 中，以便我可以使用它

【参考方案2】：

您可以简单地遍历所有类

//Array
var array = ["class1", "class2", "class3", "class4", "class5"];

//Loop
array.forEach((className, classIndex) => 
  var n = $('.' + className + ':checked').length;
  var term = n === 1 ? "is" : "are";
  console.log(n + ' of ' + className + term + ' checked');
);