勾選其他複選框時，選中一個框

我有一個複選框在我的頁面。當我檢查它時，應檢查其他複選框。而當我取消選中時，其他所有複選框也應該取消選中。我如何使用jQuery來做到這一點？或者簡單的HTML就夠了？ FIDDLE勾選其他複選框時，選中一個框

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

來源

2013-10-04 Benny

可能重複（http://stackoverflow.com/questions/5107412/check-all-checkboxes-with- jquery） –

possible [Duplicate]（http://stackoverflow.com/questions/18911067/bootstrap-switch-global-checkbox-to-uncheck-all-other/18911203#18911203） –

USIG jQuery的你可以像這樣

HTML：

<input id='selectall' type="checkbox" checked="true">

JS：

$('#selectall').change(function() { 
    if ($(this).prop('checked')) { 
     $('input').prop('checked', true); 
    } else { 
     $('input').prop('checked', false); 
    } 
}); 
$('#selectall').trigger('change');

入住這fiddle

來源

2013-10-04 06:32:12 Praveen

當我取消選擇selectall時，我想要其他人太未被檢查 – Benny

@Benny我已經更新了我的答案和小提琴，請檢查它 – Praveen

當一個o f 1/2/3/4/5未選中，我可以取消選中selecctall？ – Benny

你可以試試這個：

  <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-04 06:31:07 shemy

試試這個，

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

Fiddle

可以實現像，

$(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-04 06:31:58

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

$(document).ready(function(){ 
    $("#all").change(function(){ 
     $('.checkbox').prop('checked', $(this).prop('checked')); 
    }); 
});

fiddle

來源

2013-10-04 06:36:16

'click'不適用於複選框/單選按鈕。你可以嘗試使用'change'事件。另外最好使用'.prop'而不是'.attr' – Praveen

做了少量chages在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-04 06:48:36 manish

結帳

<div>Select All<input id="all" type="checkbox" checked="true"></div>

然後

jQuery(function($){ 
    var $all = $('#all').change(function(){ 
     $checkboxes.prop('checked', this.checked); 
    }); 
    var $checkboxes = $('input[type="checkbox"]').not($all).change(function(){ 
     $all.prop('checked', $checkboxes.not(':checked').length == 0); 
    }); 
    $checkboxes.eq(0).change(); 
})

演示：Fiddle

的[檢查與jQuery的所有複選框]

來源

2013-10-04 06:58:11

勾選其他複選框時，選中一個框

回答

相關問題