0

すべてのチェックボックスをチェックして答えを見つけましたが、コードをフィドルデモから通常のhtmlページにコピーし、WAMPサーバーでコードを実行すると、機能しません。

コードは次のとおりです。

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title> check all</title>
      <script type="text/javascript">

    $('.chk_boxes').click(function(){
    var chk = $(this).attr('checked')?true:false;
    $('.chk_boxes1').attr('checked',chk);
    });


    </script>

     </head>
     <body>


         <form>
           <table>
                 <tr class="table_head_seperator">
                    <td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]"  /></td>
                    <td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name">user name</span></td>

                    <td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name">date created</span></td>
                    <td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name">username</span></td>
    </tr>
               <tr class="table_head_seperator">
                    <td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]"  /></td>
                    <td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name">user name</span></td>

                    <td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name">date created</span></td>
                    <td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name">username</span></td>
    </tr><tr class="table_head_seperator">
                    <td class="grid_info" width="32px" bgcolor="#f6f6f6"><input type="checkbox" class="chk_boxes1" name="to_delete[<?PHP echo $entry['id'] ?>]"  /></td>
                    <td class="grid_info" width="160px" bgcolor="#eeeeee"><span class="country_name">user name</span></td>

                    <td class="grid_info" width="130px" bgcolor="#eeeeee"><span class="country_name">date created</span></td>
                    <td class="grid_info" width="100px" bgcolor="#f6f6f6"><span class="country_name">username</span></td>
    </tr>
             </table>



    <input type="checkbox" class="chk_boxes" label="check all"  />check all
    </form>
     </body>
    </html>
4

2 に答える 2

1

これはもっと簡単に思えます：

$('.chk_boxes').click(function(){
    $('.chk_boxes1').prop('checked',$(this).prop('checked'));
});

attrはpropと同じではないことに注意してください

編集：今、あなたはおそらくクリックオールワンを管理したいと思うでしょう:(コードまたは他の方法による設定の問題を処理するためにも拡張されています...クリックイベントではなく変更を使用します。

$('.chk_boxes').change(function () {
    $('.chk_boxes1').prop('checked', $(this).prop('checked'));
});
$('.chk_boxes1').change(function () {
        $('.chk_boxes').prop('checked', ($('.chk_boxes1').length == $('.chk_boxes1:checked').length) );
});
于 2013-03-15T13:11:23.917 に答える
1

これを機能させるには、jquery ライブラリを含める必要があります

の直後に含める</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

例：

<title> check all</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {

$('.chk_boxes').on('click',function(){

    var chk = false;
    if($(this).is(':checked'))
    {
        chk = true;
    }
    $('.chk_boxes1').attr('checked',chk);
});


});
</script>
于 2013-03-15T13:02:20.957 に答える