javascript - 遍历列表并在 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" ]

这是上面代码的小提琴。

Answer 2

尝试each循环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

您可以使用 first :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());
});

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

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;
};

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

该演示现场演示了上述代码。