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

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 */
})