遍历列表并在 jquery 中获取选中的复选框 id

Question

我已经获得了变量中包含复选框的所有行的 ID。

var allIds = jQuery("#progAccessSearchResults").jqGrid("getDataIDs");

现在我必须对此进行迭代并获取仅选中复选框的 ID。我尝试了以下代码来获取选中的复选框 ID。

var boxes = $(":checkbox:checked");

但它不起作用。帮帮我..！！我是 javascript n jquery 的新手。所以请不要介意这是一个愚蠢的问题..!!

Answer 1

您可以使用.map 来查找选中复选框的所有 ID，使用您现有的选择器：

HTML：

<input type="checkbox" id="cb1" />
<input type="checkbox" id="cb2" />
<input type="checkbox" id="cb3" checked="checked" />
<input type="checkbox" id="cb4" />
<input type="checkbox" id="cb5" checked="checked" />

Javascript：

var checkedIds = $(":checkbox:checked").map(function() {
        return this.id;
    }).get();

返回：[ "cb3", "cb5" ]

Here 是上述代码的小提琴。

Answer 2

尝试循环each of jquery

$("input:checkbox").each(function(){
    var $this = $(this);    
    if($this.is(":checked")){
        console.log($this.attr("id"));
    }
});

Answer 3

试试这段代码

var selected = new Array();
$('input:checked').each(function() {
    selected.push($(this).attr('id'));
});

并且您会在selected 数组中获得所有选中的复选框 ID。这里是jsfiddle

Answer 4

您可以使用第一个 :nth-child 选择器来获取在网格中具有复选框的 <td> 元素。然后您可以使用>input:checked 选择器来获取所有选中的复选框。在您拥有包含所请求复选框的 jQuery 对象后，您可以使用 .closest("tr.jqgrow") 来获取具有复选框的行。行的 id 是您需要的。您可以使用 $.map 来获取数组中的所有 id。完整的代码将是

$("#getIds").button().click(function () {
    var $checked = $grid.find(">tbody>tr.jqgrow>td:nth-child(" +
                   (iCol + 1) + ")>input:checked"),
        ids = $.map($checked.closest("tr.jqgrow"),
                    function (item) { return item.id; });
    alert("The list of rowids of the rows with checked chechboxs:\n" + ids.join());
});

您可以使用getColumnIndexByName 函数获得带有复选框iCol 的列的索引

var getColumnIndexByName = function (grid, columnName) {
    var cm = grid.jqGrid("getGridParam", 'colModel'), i, l;
    for (i = 0, l = cm.length; i < l; i += 1) {
        if (cm[i].name === columnName) {
            return i; // return the index
        }
    }
    return -1;
};

这是我在旧答案中经常使用的。

The demo 现场演示上述代码。