javascript - 如何检测选中了哪些复选框？

Question

我需要使用复选框，但没有提交按钮——它需要对用户已经在的页面产生影响，即包含复选框的同一页面。

本质上，我有大约 10 个复选框元素。用户选择一定数量的它们，然后单击一个按钮元素。当他们单击该元素时，我需要检测哪些复选框已被选中。用最少的代码做到这一点的最佳方法是什么？

Answer 1

让所有复选框共享同一个类。

var allChecked = $(".checkBoxClass:checked");

这将返回类中选中复选框的列表checkBoxClass。现在您可以迭代每个元素并对其进行操作。

for(var i=0; i<allChecked.length; i++) {    
  console.log("Checkbox " + $(allChecked[i]).val().toString() + " is checked");
}

Answer 2

尝试：

    <input type="checkbox" id="1" value="one"/>
    <input type="checkbox" id="2" value="two"/>
    <input type="checkbox" id="3" value="three"/>
    <input type="button" onclick="validate()" value="Check"/>   

    <script type="text/javascript">
        function validate(){
            var chkArr = document.querySelectorAll('input[type="checkbox"]');
            var notChecked='';
            for(var i=0;i<chkArr.length;i++){
                if(!chkArr[i].checked)
                    notChecked += chkArr[i].value
            }
            if(notChecked.length)
                alert(notChecked);
        }
    </script>

Answer 3

这些中的任何一个都应该起作用：

$('input:checked');

$('input:checkbox:checked');

$('input:checkbox').filter(':checked');