0

私は5つのチェックボックスを持っています。それらの 1 つは、すべてのチェックボックスのヘッダーです。ヘッダーのチェックボックスをオンにすると、すべてが自動的にオンになり、チェックを外すと、すべてがオフになります。子チェックボックスのいずれかをオフにすると、ヘッダーは自動的にオフになります。

私のコードは次のようなものです：

<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>チェックボックスが 1 つしか表示されず、コードが動作しなくなります。これを解決するための解決策を教えてください。

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 に答える