Question

我正在寻找检查所有复选框并找到答案，但是当我将代码从小提琴演示复制到普通的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>

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

Answer 2

这看起来更简单：

$('.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) );
});

选中所有不在wamp中的复选框

2 个答案: