Question

关于这个主题有很多问题，但没有一个问题适用于我的问题，因为我不知道如何在我的代码中应用它们 - 我是jQuery的新手。

这是我的HTML页面：

<div id="one">
   <div id="positionable2">
      <div id="xyz2">
         <table id="tab1">
           <tr><td class="header"><input type=checkbox id=cbselectall /></td></tr>
           <tr><td ><input type=checkbox name=case /></td></tr>
           <tr><td ><input type=checkbox name=case /></td></tr>
           <tr><td ><input type=checkbox name=case /></td></tr>
         </table>
      </div>
   </div>
</div>

现在我的jQuery看起来像下面这样：

$(function () {
    $("#one #positionable2 #xyz2 #tab1 #cbselectall").click(function () {
        if ($("#one #positionable2 #xyz2 #tab1 #cbselectall").is(':checked')) {
            $("#one #positionable2 #xyz2 #tab1 input[type=checkbox]").each(function () {
                //$(this).attr("checked", true);
                $(this).prop("checked", true);
            });

        } else {
            $("#one #positionable2 #xyz2 #tab1 input[type=checkbox]").each(function () {
                //$(this).attr("checked", false);
                $(this).prop("checked", false);
            });
        }
    });
});

请注意，我在表格中有其他列，带复选框的列是第一列。单击表标题中的复选框后，应选择数据行上的其他列，反之亦然。不知怎的，这不起作用。

由于我是jQuery的新手，不知怎的，我无法让它工作。请帮忙。

Answer 1

首先，您不需要在每个选择器中指定层次结构。

$("#cbselectall").on('click', function() {

    $(this)
    .parents('table') // go to the table element
    .find(':checkbox') /* find all checkboxes (note you might need to specifiy 
                          if you have other checkboxes in the table that shouldn't get checked 
                       */
    .prop('checked', $(this).is(':checked')); /* set the checked value to be the value
                                                 of the check all checkbox */
})

使用jquery 1.10.2选中/取消选中所有复选框

1 个答案: