检查是否选中了表单中的任何复选框（MooTools）答案

【问题标题】：Check if any checkbox in form is checked (MooTools)检查是否选中了表单中的任何复选框（MooTools）
【发布时间】：2015-05-21 06:31:36
【问题描述】：

我正在使用带有各种复选框组的表单，并且我希望页面底部的下一个按钮仅在选中任何复选框时出现。

我在这里找到了一个使用 jQuery 的可行解决方案：

var checkboxes = $("input[type='checkbox']"),
submitButt = $("input[type='submit']");

checkboxes.click(function() {
submitButt.attr("disabled", !checkboxes.is(":checked"));
});

http://jsfiddle.net/BPhZe/1937/

我正在寻找一种使用 MooTools 执行此操作的方法，并且我更喜欢按钮状态不是“禁用”而是通过 CSS 隐藏的解决方案。

【问题讨论】：

标签： javascript html forms checkbox

【解决方案1】：

MooTools 具有 Element.checked 属性，用于查看指定元素是否设置为“已检查”。 MooTools 还允许您在选择器中添加 ":checked" 以仅获取匹配的选定元素。这意味着您可以执行以下操作来确定是否选中了任何复选框：

if ($$("input[type=checkbox]:checked").length > 0)

或者这样确定no复选框当前被选中：

if ($$("input[type=checkbox]:checked").length < 1)

鉴于您链接到的示例表单，这是一种方法：

$$("input[type=checkbox]").each(function(checkboxInput) {
    checkboxInput.addEvent("click", function() {
        // show submit button if at least 1 checkbox is checked
        if (checkboxInput.checked) {
            $$("input[type=submit]").each(function(submitButton) {
                submitButton.removeProperty("disabled");
            });
        }
        // hide submit button if no checkboxes are checked
        if ($$("input[type=checkbox]:checked").length < 1) {
            $$("input[type=submit]").each(function(submitButton) {
                submitButton.set("disabled", "disabled");
            });
        }
    });
});

如果你的提交按钮有一个 id 属性——比如，id="formSubmitButton"——你可以这样引用它并使用稍微少一点的代码来完成同样的事情，而不必使用 $$("input[type=submit ]").each(function(submitButton) { ... } :

$("formSubmitButton").removeProperty("disabled");

要从禁用/重新启用按钮更改为显示/隐藏按钮，您可以使用属性 style="display:none;" 设置的按钮启动表单，然后调用 submitButton.removeProperty("style" ) 当复选框被选中时， submitButton.setStyle("display", "none") 当不再有任何被选中时。该版本的完整代码示例，使用带有 ID 的提交按钮：

$$("input[type=checkbox]").each(function(checkboxInput) {
    checkboxInput.addEvent("click", function() {
        // show submit button if at least 1 checkbox is checked
        if (checkboxInput.checked) {
            $("formSubmitButton").removeProperty("style");
        }
        // hide submit button if no checkboxes are checked
        if ($$("input[type=checkbox]:checked").length < 1) {
            $("formSubmitButton").setStyle("display", "none");
        }
    });
});

【讨论】：