使用 jQuery 选中表格中的所有复选框

Posted 2023-05-08

【中文标题】使用 jQuery 选中表格中的所有复选框

【英文标题】：Select all checkboxes in table with jQuery

【发布时间】：2013-01-09 11:47:04

【问题描述】：

我在表格中使用复选框，并且我在表头中有一个复选框。

我想要完成的是，当我点击头部的复选框时，表格行下面的所有复选框都应该被选中..

这是我的 html：

            <form action="<?php $_PHP_SELF ?>" method="post">
        <div class="content top">
          <table id="datatable_example" class="responsive table table-striped table-bordered" style="width:100%;margin-bottom:0; ">
            <thead>
              <tr>
                <th style="width:0px; padding-right:0px;" class="no_sort"> <label class="checkbox ">
                    <input type="checkbox" id="checkAll" name="checkAll" class="select_all">
                  </label>
                </th>
                <th style="width:200px;" class="no_sort"> Institue </th>
                <th style="width:150px;" class="no_sort"> Education </th>
                <th style="width:300px;" class="no_sort"> Description </th>
                <th style="width:150px;" class="ue no_sort"> Started </th>
                <th style="width:150px;" class="ue no_sort"> Completion </th>
                <th class="ms no_sort "> Actions </th>
              </tr>
            </thead>
            <tbody>
              <?php echo $educations ?>
            </tbody>
          </table>
          <div class="row-fluid control-group">
            <div class="pull-left span6 " action="#">
              <div>


                <div class="controls inline input-large pull-left">                    
                  <select name="bulkaction" data-placeholder="Bulk actions: " class="chzn-select " id="default-select">
                    <option value=""></option>
                    <option value="delete">Delete</option>
                  </select>
                </div>
                <button type="submit" name="submitbulkaction" class="btn btn-inverse inline">Apply</button></form>

这是表格中使用的 php 变量 $education..

$educations .= "<tr>
                <td><label class=\"checkbox\">
                    <input type=\"checkbox\" class=\"chkboxes\" name=\"ids[]\" value=\"$education_id\">
                  </label></td>
                <td class=\"to_hide_phone\"> $institue_name</td>
                <td class=\"to_hide_phone\"> $education_name</td>
                    <td>$education_desc</td>
                <td>$education_started</td>
                <td>$education_ended</td>
                <td class=\"ms\">
                <div class=\"btn-group1\"> 
                <a href=\"education-edit.php?id=$education_id\" class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"left\" data-original-title=\" edit \">
                <i class=\"gicon-edit\"></i></a> 
                <a class=\"btn btn-small\" rel=\"tooltip\" data-placement=\"top\" data-original-title=\"View\">
                <i class=\"gicon-eye-open\"></i>
                </a> 
                <a class=\"btn  btn-small\" rel=\"tooltip\" data-placement=\"bottom\" data-original-title=\"Remove\"><i class=\"gicon-remove \"></i></a> 
                </div>
                </td>
              </tr>";

我正在尝试设置后面的 Jquery..

    <script type="text/javascript">
$(document).ready(function()
    $('#checkAll').click(function () 
        $('.chkboxes').attr('checked','checked');
    );
);
    </script>

请告诉我我在这里做错了什么，以及如何解决问题？

我也查看了关于相同问题复选框的其他问题，其中大多数问题都得到了解决，但是当我应用相同的代码时仍然没有得到我想要的结果。

---

更新：正如你们所说，我修复了类名错误，谢谢， 但现在出现了一些奇怪的问题。 我的意思是现在它可以工作，但它不像我点击复选框并且所有复选框都在旅途中被选中。我必须刷新页面然后所有复选框都会被选中？ 那个问题是怎么回事？ 为什么我需要刷新页面才能发生该事件？

【问题讨论】：

*** 不适合回答这个问题。我们不进行代码调试。您需要进行自己的调试，如果您不确定为什么某些事情没有按预期工作，请发布代码并说明您期望它做什么，以及实际在做什么，包括所有错误消息。见ask advice。

据我所见，您正在尝试使用.checkboxes，而在您的PHP代码中您正在使用.chkboxes

@MarcusRecck 谢谢，我更新了我的错误，但现在出现了新问题。当我单击复选框以 selectAll 时，它当时没有被选中，但是当我单击重新加载按钮时，所有复选框都被选中，因为我在刷新页面之前单击了复选框。

尝试实现答案部分中的示例代码之一。

【参考方案1】：

$(document).ready(function()
    $('#checkAll').click(function () 
        $('#datatable_example .chkboxes').prop('checked', true);
        // $('#datatable_example input[type=checkbox]').prop('checked', true);
    );
);

【讨论】：

请看更新先生，我修复了类名错误。甚至我也尝试复制粘贴您的 Jquery。它可以工作，但为了使其工作，我需要刷新页面。这是我现在遇到的一个奇怪问题。我的意思是，如果我单击 checkAll 复选框，那么其余的复选框不会在那个时刻被选中，但是当我刷新页面时，所有其他复选框都会被选中，因为我在刷新页面之前选择了 checkAll。这是个奇怪的问题？？？

【参考方案2】：

您正在尝试检查一个名为复选框的类，而不是实际的复选框。通过其类型属性识别复选框 -

$(document).ready(function()
    $('#checkAll').click(function () 
        $('#datatable_example input[type="checkbox"]').prop('checked',true);
    );
);

【讨论】：

请看更新先生，我修复了类名错误。甚至我也尝试复制粘贴您的 Jquery。它可以工作，但为了使其工作，我需要刷新页面。这是我现在遇到的一个奇怪问题。我的意思是，如果我单击 checkAll 复选框，那么其余的复选框不会在那个时刻被选中，但是当我刷新页面时，所有其他复选框都会被选中，因为我在刷新页面之前选择了 checkAll。这是个奇怪的问题？？？

所有复选框的 ID 都相同吗？如果是这样，你需要解决这个问题。

不，先生，所有复选框的 ID 都不相同。你他们有相同的名字。我没有为复选框使用 id 属性，只为应该检查所有其他复选框的主复选框使用了 id 属性。

有什么地方可以看到更完整的标记吗？这里肯定有其他事情发生。

先生，这是我的educations.php 和footer.php footer.php 的完整代码，其中包括所有jquery 文件和脚本。 Educations.php tny.cz/ee92381e Footer.php tny.cz/00e45039 我可以附加文件，但我现在不知道在哪里附加文件？

【参考方案3】：

$('.chkboxes').attr('checked','checked');

班级不同。

还可以考虑使用heredocs 或使用?> 结束PHP，并在关闭块之前使用<?php 在您的HTML 内容之后重新开始。

【参考方案4】：

你的课程是class=\"chkboxes\"

在 jquery 中你给出了

  $('.checkboxes').attr('checked','checked');

改正

【参考方案5】：

另一个例子：

<script type="text/javascript">
$(document).ready(function()
  $('#checkAll').click(function () 
    $(this).parents('fieldset:eq(0)').find(':checkbox').attr('checked', this.checked);
  );
);
</script>

只需要在<form>之后加上fieldset标签，在</form>之前关闭，但只会勾选fieldset标签之间的复选框。

http://briancray.com/posts/check-all-jquery-javascript

【参考方案6】：

简单的方法...

$("#buttonSelectAll").click(function () if($("#Table").find('input:checkbox:first').attr("checked")==="checked") $('#Table input:checkbox').prop('checked', false); else $('#Table input:checkbox').prop('checked', true); );

【参考方案7】：

对于多表使用这个

$('th input:checkbox').click(function(e)

var table = $(e.target).closest('table'); $('td input:checkbox', table).attr('checked', e.target.checked);

);

【参考方案8】：

$(document).ready(function()
    $('#checkAll').click(function () 
        $('#datatable_example').find('.chkboxes').prop('checked', true);
        );
);