检查所有在 wamp 中不起作用的复选框答案

【问题标题】：Check all checkboxes not working in wamp检查所有在 wamp 中不起作用的复选框
【发布时间】：2013-03-04 05:05:44
【问题描述】：

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

【问题讨论】：

你得到什么错误？你试过什么调试？

标签： javascript html

【解决方案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) );
});

【讨论】：

【解决方案2】：

你需要包含一个 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>

【讨论】：

谢谢，但即便如此也无济于事
查看我的编辑 - 它应该被包装在一个就绪函数中
是的，我在发布这个问题之前从其他线程中尝试过.. :)
link 这是我正在尝试的同一件事。它在小提琴中得到了演示，我复制了它并在 wamp 上尝试了