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

我正在使用表格中的复选框，并且在tablehead中有一个复选框。使用jQuery选择表格中的所有复选框

我所试图实现当我点击在头上的复选框，所有在下面的表行的复选框应检查..

这里是我的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这是在表中使用变量$教育..

$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>

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

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

更新：我固定为大家提到的类名错误，谢谢你，但现在它的一些奇怪的问题出现了。我的意思是现在它的工作，但它不工作，就像我点击复选框，所有复选框得到选择在旅途中..我不得不刷新页面，然后所有复选框将被选中？这个问题是怎么回事？为什么我需要刷新该事件发生的页面？

来源

2013-01-25 Sizzling Code

StackOverflow不是这个问题的适当位置。我们不做代码调试。您需要进行自己的调试，如果您不确定为什么某些功能不能按预期工作，请在代码中加上解释您期望执行的操作的内容，以及实际执行的操作，包括所有错误消息。看[ask advice]（http://stackoverflow.com/questions/ask-advice）。 –

从我看到你正在尝试使用'.checkboxes'并在你的PHP代码中使用'.chkboxes' –

@MarcusRecck Thankyou，我更新了我的错误，但现在出现了新问题。当我点击复选框选择所有它没有被选择在那一刻，但当我点击重新加载按钮，然后所有复选框被选中因为我刷新页面之前点击复选框的因素。 –

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

这个类是不同的。

也考虑使用heredocs或结束PHP与?>并在关闭该块之前在HTML内容与<?php之间再次开始。

来源

2013-01-25 13:51:26

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

来源

2013-01-25 13:51:53 undefined

请参阅更新，先生，我修复了类名错误。甚至我试着复制粘贴你的jquery。它的工作原理，但为了使其工作，我需要刷新页面。这是我现在得到的一个奇怪的问题。我的意思是，如果我点击checkAll复选框，其余的复选框不会在该瞬间被选中，但当我刷新页面时，所有其他复选框都会被选中，因为在刷新页面之前选择了checkAll。这是奇怪的问题??? –

您试图检查名为复选框的类，而不是实际的复选框。由它的类型属性标识复选框 -

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

来源

2013-01-25 13:52:25

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

不，先生，所有复选框没有相同的ID。他们有相同的名字。我没有使用复选框的id属性，只有使用id属性的主复选框应该勾选其他复选框。 –

你定的类作为class=\"chkboxes\"

，并在jQuery的你给

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

正确它

来源

2013-01-25 13:54:03

又如：

<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>之前关闭，但只会检查字段集标签之间的复选框。

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

来源

2013-01-25 13:57:56 Sacx

简单的方法来做到这一点...

$("#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); });

来源

2013-08-05 16:32:04

对于多台使用该

$（ '个输入：复选框'）。点击（函数（E）{

无功表= $（e.target）.closest （'table'）; $（'td input：checkbox'，table）.attr（'checked'，e.target.checked）;

}）;

来源

2013-09-03 10:54:12

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

来源

2016-01-21 16:04:17 Aswathy

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

回答

相关问题