0

我有 5 个复选框。其中之一是所有复选框的标题。如果我选中标题复选框，则所有内容都应自动检查，如果我取消选中它，则所有内容都应取消选中。如果我取消选中任何子复选框，标题应自动取消选中。

我的代码是这样的：

<html>
<SCRIPT LANGUAGE="JavaScript">
              function checkAll()
              {

                if(pp_checkall.checked==true) 
                {
                    for (i = 1; i <= pp_check.length; i++)
                     pp_check[i].checked = true ;
                }
              else
                {
                    for (i = 1; i <= pp_check.length; i++)
                    pp_check[i].checked = false ;
                }
              }

</script>
<SCRIPT LANGUAGE="JavaScript">
             function checkOne()
               {
                for (i = 1; i <= pp_check.length; i++)
                 {  
                  if(pp_check[i].checked==false)
                  {
                    pp_checkall.checked = false ;
                  }
                }
              }

              </script> 

<body>
<table>
<tr><th width="1px"><input type="checkbox" text="Dharan" name="pp_checkall" onclick="checkAll();"></th></tr>
<tr>
</tr>
<tr> <input type="checkbox" name="pp_check" value="1" onclick="checkOne();"></tr>
<!--<tr> <input type="checkbox" name="pp_check" value="2" onclick="checkOne();"></tr>
<tr> <input type="checkbox" name="pp_check" value="3" onclick="checkOne();"></tr>
<tr> <input type="checkbox" name="pp_check" value="4" onclick="checkOne();"></tr> -->
</table>
</body>
</html>

它也可以正常工作，但在某些情况下只会<td>出现一个复选框，这会阻止代码工作。请给出一些解决方案来解决这个问题。

4

2 回答 2

1

尝试这个

<script type="text/javascript" language="javascript">

        var pp_check = document.getElementsByName('pp_check');
        var pp_checkall = document.getElementsByName('pp_checkall')[0];

        function checkAll() {
            if (pp_checkall.checked == true) {
                for (i = 0; i < pp_check.length; i++)
                    pp_check[i].checked = true;
            }
            else {
                for (i = 0; i < pp_check.length; i++)
                    pp_check[i].checked = false;
            }
        }

        function checkOne() {
            var pp_check = document.getElementsByName('pp_check');
            for (i = 0; i < pp_check.length; i++) {
                if (pp_check[i].checked == false)
                    pp_checkall.checked = false;
            }
        }

</script>
于 2012-08-14T07:11:53.120 回答
0

您也可以使用 jQuery。

    $('input[name="pp_checkall"]').change(function () {
        $('input[name=pp_check]').attr('checked', this.checked);
    });

    $('input[name="pp_check"]').change(function () {
        $('input[name="pp_checkall"]').prop(
          'checked', 
          $('input[name=pp_check]:not(:checked)').length === 0 ? true : false 
        );
    });

演示：http: //jsfiddle.net/gPeh8/1/

于 2012-08-14T07:19:13.577 回答