循环检查复选框并计算每个选中或未选中的复选框

Posted 2023-03-05

【中文标题】循环检查复选框并计算每个选中或未选中的复选框

【英文标题】：Loop through checkboxes and count each one checked or unchecked

【发布时间】：2022-03-03 23:44:44

【问题描述】：

我遇到了一些问题。这是一个简短的解释。

我在一个标准表单上有 12 个复选框。我需要做的是遍历它们中的每一个并了解哪些被选中，哪些未被选中。

使用它，我可以构建一个字符串，然后将其输入到数据库字段中。这是一个例子。

（检查1 - 已检查） （检查 2 - 未检查） （检查3 - 已检查）

1,0,1

到目前为止，我已经得到了这段代码。

$('input[type=checkbox]').each(function () 
           if (this.checked) 
               console.log($(this).val()); 
           
);

它工作得很好，只是它只带回选中的，而不是全部。

【问题讨论】：

你应该重新设计你的数据库架构。

如何重新设计？将一组复选框存储在一个字段中不是比每个复选框都有一个字段更好吗？

这显然取决于复选框是什么，但您可能应该使用单个字段或子表（每个 [选中] 复选框每行一个字段）

“在一个字段中存储一组复选框不是比每个复选框都有一个字段更好吗？” 不，因为您的 1 和 0 不会被存储作为位，它们存储为字节。如果您在一个字段中存储逗号分隔值位列表的原因是为了提高效率，那么请丢失逗号并改用 按位和掩码 操作。虽然，最近 mysql 已经实现了 bit 数据类型，所以 bitwise 和 mask 可能不是必需的，除非你正在对信用卡芯片进行编程或者你需要非常快的东西。

【参考方案1】：

要完全按照您显示的格式构建结果字符串，您可以使用：

var sList = "";
$('input[type=checkbox]').each(function () 
    sList += "(" + $(this).val() + "-" + (this.checked ? "checked" : "not checked") + ")";
);
console.log (sList);

但是，我同意@SLaks，我认为您应该重新考虑将其存储在数据库中的结构。

编辑：抱歉，我误读了您要查找的输出格式。这是一个更新：

var sList = "";
$('input[type=checkbox]').each(function () 
    var sThisVal = (this.checked ? "1" : "0");
    sList += (sList=="" ? sThisVal : "," + sThisVal);
);
console.log (sList);

【讨论】：

据我了解，他想要1s 和0s 上的字符串。

谢谢。我会试试这个并告诉你。

嗯。我试过这个，但它在控制台日志中显示了整个 js 文件。

我不能使用 this 但需要使用 $(this)

@Si8 - 我更新了小提琴，所以代码忽略了未选中的复选框，这应该可以减少多余的逗号：jsfiddle.net/m4k6vj8x

【参考方案2】：

使用选择器

您可以像这样获得所有选中的复选框：

var boxes = $(":checkbox:checked");

所有未检查的都是这样的：

var nboxes = $(":checkbox:not(:checked)");

您可以只循环浏览这些集合中的任何一个，然后存储这些名称。如果没有任何东西，你知道它要么被检查过，要么没有被检查过。在 php 中，如果您有一组名称被选中，您可以简单地发出in_array() 请求，以了解是否应在以后选中任何特定框。

序列化

jQuery 还有一个serialize method，它将维护表单控件的状态。例如，jQuery 网站上提供的示例如下：

single=Single2&multiple=Multiple&multiple=Multiple3&check=check2&radio=radio2

这将使您能够保留检查过哪些元素的信息。

【参考方案3】：

你可以通过写$(':checkbox').each(...)来循环所有的复选框。

如果我正确理解您的问题，您正在寻找以下代码：

var str = "";

$(':checkbox').each(function() 
    str += this.checked ? "1," : "0,";
);

str = str.substr(0, str.length - 1);    //Remove the trailing comma

此代码将遍历所有复选框并将1, 或0, 添加到字符串。

【讨论】：

谢谢。也会尝试一下。

你也可以使用 value 属性。如果您尝试创建一个二进制值，则为每个复选框赋予 2 的递增幂，然后将选中的值相加，二进制中的总和将与添加 1 和 0 相同。您将被限制为 32 个复选框（javascript 中最大的数值是 2^32 [我认为可能是 64]。更好的数据库设计会更灵活）

【参考方案4】：

我认为没有足够的时间关注原始帖子中提出的架构注意事项。所以，这是任何新手都需要考虑的事情。

假设您继续构建此解决方案。您所有的次要值都连接成一个值并存储在数据库中。您确实在数据库中节省了 [一点] 空间和一些时间编码。

现在让我们考虑一下，您必须执行频繁且简单的任务，即在当前复选框 3 和 4 之间添加一个新复选框。您的开发经理、客户，无论您希望这是一个简单的更改。

因此，您将复选框添加到 UI（简单的部分）。无论有多少复选框，您的循环代码都已经连接了这些值。您还认为您的数据库字段只是一个 varchar 或其他字符串类型，所以它也应该没问题。

当客户或您尝试查看更改前的数据时会发生什么？您实际上是从左到右序列化。但是，现在 3 之后的值都相差 1 个字符。您将如何处理所有现有数据？您是否要编写一个应用程序，将其全部从数据库中提取出来，对其进行处理以添加新问题位置的默认值，然后将其全部存储回数据库中？当您每周或每月有几个新值时会发生什么？如果你移动位置并且 jQuery 以不同的顺序处理它们怎么办？您的所有数据都被冲洗掉，必须再次重新处理才能重新排列。

不提供紧密键值关系的整个概念是 ludacris 并且迟早会让您陷入困境。对于那些考虑这个的人，请不要。架构更改的其他建议很好。使用子表、主表中的更多字段、问答表等。当数据结构可能发生变化时，不要存储未标记的数据。

【参考方案5】：

$.extend($.expr[':'], 
        unchecked: function (obj) 
            return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
        
    );

$("input:checked")
$("input:unchecked")