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

【问题标题】：jQuery - Getting the checked values of any set of checkboxesjQuery - 获取任何一组复选框的选中值
【发布时间】：2010-08-24 16:10:30
【问题描述】：

如果您有一组复选框，我想确定最有效的方法（使用 jquery 或 dom）来获取一组复选框的值。

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

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

编辑：

附带说明，性能在这里非常重要。对于具有少量输入元素的表单和具有数千个输入元素的表单，需要此算法。而且我的许多用户的计算机都非常旧（'02、'04、'05）。

【问题讨论】：

听起来像这样：stackoverflow.com/questions/590018/…
@Vivin：但我没有得到我想要的答案。我的意思是“不可能，因为......”的答案是可以接受的，我转而采用了一个 hacky-ish 解决方案来解决我的迫切需求。
@epascarello：我同意$("input:checkbox[name=type]:checked") 会解决问题，但这是相当可怕的表现！必须查看 dom 的每个（输入）元素并找到具有我指定名称的元素。大页面的性能真的可以接受吗（我需要使用它）？
@Dimitriy 明白了。但是您也可以发布自己的解决方案并接受它。 :)
@Vivin：我对我的解决方案不满意 :) 我希望得到更多的意见。一个例子是：stackoverflow.com/questions/3398998/…，我很想知道是否有 CSS 解决方案，提供的答案对我没有帮助。如果没有我正在寻找的解决方案是可能的，我也想知道这一点，但是当我不知道事实时，我不想只是放下它是不可能的。

标签： javascript jquery dom

【解决方案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>

【讨论】：

让我重新说明问题。我有一个包含数千个复选框的表单。我不知道在我的函数中提前获取复选框的公共父级以优化查找的父容器是什么（或要达到多高）。当复选框是表单的一部分时，我在问题中提供的解决方案似乎表现良好，但当它们不在表单之外时，因为我需要不同的算法（通用input:checkbox[name=...] 除外）也许这就足够了，通用的东西不是一个形式的孩子，形式是一个。
好吧，那我猜你回答了你自己的问题......虽然，与其尝试编写一些超快速算法来检查每个复选框，我仍然认为你会更好地尝试找到一种方法来定位父元素。 jQuery 有一个非常健壮的事件处理系统，通过 event.target 属性，你可以很容易地找出包裹在一组特定复选框周围的元素。如果您要处理数以千计的问题，我认为您会花费大量精力来有效地组织它们以及对它们进行迭代。

【解决方案2】：

如果元素不是表单的一部分，我认为我必须采用的解决方案是我提出的使用通用 "input:checkbox[name=" + elm.attr("name") + "]" 的后备方案。

【讨论】：