使用 jQuery 查找选中的复选框答案

【问题标题】：find selected checkboxes with jQuery使用 jQuery 查找选中的复选框
【发布时间】：2012-12-05 17:59:23
【问题描述】：

我有这个结构：

<div id="fields" class="grid">
    <div>...<div>
    <div id="some_id_1" class="itemSortable">
        <input ...>
        <input ...>
        <div>
            <input id="selected" name="selected" type="checkbox" value="true">
            <input name="selected" type="hidden" value="false">
            ...
        </div>
    <div id="some_id_2" class="itemSortable">
        <input ...>
        <input ...>
        <div>
            <input id="selected" name="selected" type="checkbox" value="true">
            <input name="selected" type="hidden" value="false">
            ...
        </div>
     ...
    <div id="some_id_n" class="itemSortable">
        <input ...>
        <input ...>
        <div>
            <input id="selected" name="selected" type="checkbox" value="true">
            <input name="selected" type="hidden" value="false">
            ...
        </div>
</div>

我没有使用 jQuery 的经验，所以我被卡住了。有人可以帮助使用 jQuery 脚本来获取选定复选框的所有 id 数组（例如some_id_x）吗？

【问题讨论】：

$(".grid .input[type='checkbox']:checked") 将返回所有选中的复选框元素。
我认为这应该回答你的问题！ stackoverflow.com/questions/590018/…
代码中的复选框实际上都没有被选中/选中，所以答案总是[] :)
谢谢大家！抱歉，我不能在这里为所有有用的答案投票:)

标签： jquery

【解决方案1】：

要获取所选复选框的最近父 .itemSortable 的 ids 数组，请尝试以下操作：

var idArray = $('#fields').find(':checked').map(function() {
    return $(this).closest('.itemSortable').prop('id');
}).get();

您似乎有很多重复的id 属性，但这意味着您的 HTML 无效，会导致代码出现问题。

【讨论】：

我认为他想知道父元素的 ID，所以返回 $(this).parents("div.itemSortable").attr("id"); 应该可以解决问题。

【解决方案2】：

首先你得到复选框本身：

$(':input:checked');

然后你找到他们各自的父母：

$(':input:checked').parents('.itemSortable');

要获取每个 id，请使用 .each() 遍历结果列表：

var ids = [];
$(':input:checked').parents('.itemSortable').each(function() {
    ids.push(this.id);
});

【讨论】：

【解决方案3】：

css id 只能出现在页面上的 1 个元素上，请使用类。

$('.someClass:checked').serialize()

【讨论】：

【解决方案4】：

使用 :checked Selector

http://api.jquery.com/selected-selector/的详细信息

例子：

$(function()
{
    var idArray = new Array(); $('#fields').find(':checked').each(function() 
   {
       idArray.push(this.id);
   });

   console.log(idArray);
});

【讨论】：

【解决方案5】：

为了检索类型检查（复选框）的检查输入，请使用":checked" 选择器。这个例子可以解释我的观点：

HTML：

<div id="fields" class="grid">
        <div id="some_id_1" class="itemSortable">
            <div>
                <input id="selected" name="selected" type="checkbox" value="true" checked="checked"/>
            </div>
        </div>
        <div id="some_id_2" class="itemSortable">
            <div>
                <input id="selected" name="selected" type="checkbox" value="true" checked="checked"/>
            </div>
         </div>
        <div id="some_id_n" class="itemSortable">
            <div>
                <input id="selected" name="selected" type="checkbox" value="true"/>
            </div>
        </div>
    </div>

javascript/JQuery:

$(document).ready(function () {
            alert($("#fields :checked").length);
        });

这个例子将提示第二个； id 为 "fields" 的元素中选中复选框的计数。

PS：

我希望这是您的要求。
使用属性checked="checked"检查复选框类型的输入

【讨论】：