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

Question

I was looking for check all checkboxes and found the answer but as i copied the code from fiddle demo to a normal html page and execute the code in WAMP server its not working. 我正在寻找检查所有复选框并找到答案但是当我将代码从小提琴演示复制到普通的html页面并执行WAMP服务器中的代码时它无法正常工作。

Here is the code: 这是代码：

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

you need to include a jquery library for this to work 你需要包含一个jquery库才能工作

include just after the </title> 包括在</title>

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

Example: 例：

<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

This would seem simpler: 这似乎更简单：

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

Note that attr is NOT the same as prop 请注意，attr与prop不同

EDIT: now you probably also want to manage the click all one:(also enhanced to handle the problem of setting via code or some other way...using change not click event. 编辑：现在你可能也想管理点击所有一个:(也增强了处理通过代码或其他方式设置的问题...使用更改而不是单击事件。

$('.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 个解决方案

解决方案1
1 2013-03-15 13:02:20

解决方案2
1 已采纳 2013-03-15 13:11:23

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

问题描述

2 个解决方案

解决方案1 1 2013-03-15 13:02:20

解决方案2 1 已采纳 2013-03-15 13:11:23

解决方案1
1 2013-03-15 13:02:20

解决方案2
1 已采纳 2013-03-15 13:11:23