Javascript:主复选框，用于控制表列中的所有复选框

Javascript: master checkbox to control all checkboxes in a table column

本文关键字：复选框 控制 用于 Javascript      更新时间：2023-09-26

我有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>复选框，这会阻止代码工作。请给出一些解决方案来解决这个问题。

试试这个

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

你可以使用 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/

相关文章：