javascript - jQuery - 获取任何一组复选框的选中值

Question

我想确定最有效的方法(使用 jquery 或 dom)来获取一组复选框的值(如果您有其中一个)。

当输入复选框是表单的一部分时，这应该是通用的。但是，这个 x 浏览器安全吗？如何更有效地执行此操作？如果复选框不是表单的一部分怎么办？

function (domCheckboxElm) {
    var result = $.map($(domCheckboxElm.form.elements[domCheckboxElm.name]).filter(":checked"), function(e) {
        return $(e).val();
    });
    return result;
}

编辑:

顺便说一句，性能在这里非常重要。对于具有少量输入元素的表单和具有数千个输入元素的表单，需要此算法。我的许多用户都拥有非常旧的计算机('02、'04、'05)。

Answer 1

首先: Select values of checkbox group with jQuery

性能确实不应该成为问题，除非您一次性完成数千个复选框。最好的选择是将复选框封装在 div 或其他父 DOM 对象中，然后可以在 jQuery 中使用它来限制其 DOM 搜索:

HTML

<div id="checkboxDiv">
  <input type="checkbox" name="sample" value="isAPerson"  />       
  <input type="checkbox" name="sample" value="isADog"  />
  <input type="checkbox" name="sample" value="isACat"  />
</div>

jQuery

var checkBoxArray=[];
$("#checkboxDiv input:checkbox").each(function(){
    checkBoxArray.push([$(this).attr("value"),$(this).attr("checked")]);
});

这是实际示例(假设您已经包含 jQuery):

<script type="text/javascript">

 $("#checkboxDiv input:checkbox").click(function(){
    var checkBoxArray=[];
    $("#checkboxDiv input:checkbox").each(function(){
        checkBoxArray.push([$(this).attr("value"),$(this).attr("checked")]);
    });
     $("#disp").empty().append(function(){
            var outputStr="";
            for (a in checkBoxArray){
                outputStr+=checkBoxArray[a][0]+": "+checkBoxArray[a][1]+"<br/>";
            }
            return outputStr;
         });
    });
</script>

然后，在正文中:

<div id="checkboxDiv">
  <input type="checkbox" name="sample" value="isAPerson"  />       
  <input type="checkbox" name="sample" value="isADog"  />
  <input type="checkbox" name="sample" value="isACat"  />
</div>

<div id="disp"></div>