使用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選擇表格中的所有複選框

回答

相關問題