6

ページにチェックボックスがあります。チェックすると、他のチェックボックスがチェックされます。そして、チェックを外すと、他のすべてのチェックボックスもチェックを外す必要があります。jQueryを使用してこれを行うにはどうすればよいですか? それとも単純な HTML で十分ですか? フィドル

    <div>Select All<input type="checkbox" checked="true"></div> 
    1.<input type="checkbox"> 
    2.<input type="checkbox"> 
    3.<input type="checkbox"> 
    4.<input type="checkbox"> 
    5.<input type="checkbox">
4

6 に答える 6

5

これを試して、

<div>Select All<input type="checkbox" id="parent" /></div> 
  1.<input type="checkbox" class="child"> 
  2.<input type="checkbox" class="child"> 
  3.<input type="checkbox" class="child"> 
  4.<input type="checkbox" class="child"> 
  5.<input type="checkbox" class="child"> 

<script>
    $(function(){
      $('#parent').on('change',function(){
         $('.child').prop('checked',$(this).prop('checked'));
      });
      $('.child').on('change',function(){
         $('#parent').prop('checked',$('.child:checked').length ? true: false);
      });
    });
</script>

フィドル

次のように達成できます。

$(function() {
  $('#parent').on('change', function() {
    $('.child').prop('checked', this.checked);
  });
  $('.child').on('change', function() {
    $('#parent').prop('checked', $('.child:checked').length===$('.child').length);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>Select All<input type="checkbox" id="parent" /></div>
1.<input type="checkbox" class="child"> 2.
<input type="checkbox" class="child"> 3.
<input type="checkbox" class="child"> 4.
<input type="checkbox" class="child"> 5.
<input type="checkbox" class="child">

于 2013-10-04T06:31:58.043 に答える
1

あなたはこれを試すことができます：

            <html>
            <head>
            <script type="text/javascript">
            function toggleGroup(id) {
                var group = document.getElementById(id);
                var inputs = group.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = (inputs[i].checked) ? false : true;
                }

            }
            window.onload = function() {
            document.getElementById("checkmain").onchange = function() {
               toggleGroup("check_grp");

            }
            }
            </script>
            </head>
            <body>
             <form name="form1" >
                <input type="checkbox" name="checkmain" id="checkmain" /><br />
                <p id="check_grp">
                     <input type="checkbox" /><label for="check1">check 1</label>
                     <input type="checkbox"  /><label for="check2">check 2</label>
                     <input type="checkbox"  /><label for="check3">check 3</label>
                     <input type="checkbox"  /><label for="check4">check 4</label>
                     <input type="checkbox"  /><label for="check5">check 5</label>
                </p>
            </form>
            </body>
            </html>
于 2013-10-04T06:31:07.673 に答える
0

HTML にいくつかの変更を加えました:

<div>Select All<input type="checkbox" checked="true" onChange='f.update(this)'/>
</div> 
 <div id="target">
   1.<input type="checkbox"/> 
   2.<input type="checkbox"/> 
   3.<input type="checkbox"/> 
   4.<input type="checkbox"/> 
   5.<input type="checkbox"/> 
</div>

jQuery:

var f=(function(){
    return{
       update:function(t){
          if($(t).is(':checked'))
           {            
                $('#target input[type=checkbox]').prop('checked',true);
           }else{$('#target input[type=checkbox]').prop('checked',false);}
       }
    }
})();
于 2013-10-04T06:48:36.460 に答える