2

テーブルでチェックボックスを使用しており、テーブルヘッドにチェックボックスがあります。

私が達成しようとしているのは、頭のチェックボックスをクリックすると、表の行の下にあるすべてのチェックボックスをオンにする必要があることです..

ここに私の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>

ここで何が間違っているのか、問題を解決する方法を教えてください。

同じ問題のチェックボックスについて投稿された他の質問も調べましたが、それらのほとんどは解決されましたが、それでも同じコードを適用しても、必要な結果が得られません。

更新：皆さんが言及したように、クラス名のエラーを修正しました。ありがとうございますが、奇妙な問題が発生しました。今は機能しますが、チェックボックスをクリックすると、すべてのチェックボックスが外出先で選択されるように機能しません。ページを更新する必要があり、すべてのチェックボックスが選択されますか? その問題どうした？そのイベントが発生するためにページを更新する必要があるのはなぜですか?

4

8 に答える 8

4 
$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example .chkboxes').prop('checked', true);
        // $('#datatable_example input[type=checkbox]').prop('checked', true);
    });
});
于 2013-01-25T13:51:53.517 に答える
1

実際のチェックボックスではなく、チェックボックスと呼ばれるクラスをチェックしようとしています。タイプ属性でチェックボックスを識別します-

$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example input[type="checkbox"]').prop('checked',true);
    });
});
于 2013-01-25T13:52:25.180 に答える
0 
$('.chkboxes').attr('checked','checked');

クラスが違います。

また、ヒアドキュメントを使用するか、PHPをで?>終了し、HTMLコンテンツの後<?phpでブロックを閉じる前に再開することを検討してください。

于 2013-01-25T13:51:26.937 に答える
0

あなたはクラスをclass=\"chkboxes\"

そしてあなたが与えたjqueryで

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

修正する

于 2013-01-25T13:54:03.867 に答える
0 
$(document).ready(function(){
    $('#checkAll').click(function () {
        $('#datatable_example').find('.chkboxes').prop('checked', true);
        });
});
于 2016-01-21T16:04:17.140 に答える
0

もう一つの例：

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

fieldsetの後にタグを追加し<form>、前にクローズする</form>だけで済みますが、fieldset タグ間のチェックボックスのみがチェックされます。

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

于 2013-01-25T13:57:56.670 に答える
0

やり方は簡単...

$("#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-05T16:32:04.377 に答える