简单切换框：

Question

请有人告诉我如何设置全部检查并取消选中所有当我在所有检查后逐个检查单个复选框时，上面检查并取消选中所有选中，这就是他被检查的原因。这是我目前正在使用的代码：

＆＃13;

$(document).ready(function(){

$('.checkall').click(function(){
        $('input:checkbox').prop('checked',true);
        $('.uncheckall').prop('checked',false);
        console.log(checkedValues);
    });
    $('.uncheckall').click(function(){
         $('input:checkbox').prop('checked',false);
         $(this).prop('checked',true);
    });
    $('.single').on('click',function(){
        if($('.single:checked').length == $('.single').length){
            $('.checkall').prop('checked',true);
            $('.uncheckall').prop('checked',true);
        }else{
            $('.checkall').prop('checked',false);
            $('.uncheckall').prop('checked',false);
        }
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
)<!DOCTYPE html>
<html>
<head>
  <title>jquery checked</title>
</head>
<body>
<label>checked all</label>
<input type="checkbox" name="check123" class="checkall">
<label>unchecked all</label>
<input type="checkbox" name="check123" class="uncheckall">
<div>
<p>select</p>
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">

</div>

</body>
</html>

＆＃13;

Answer 1

简单切换框：

＆＃13;

function toggle(source) {
      checkboxes = document.getElementsByName('foo');
      for(var i=0, n=checkboxes.length;i<n;i++) {
        checkboxes[i].checked = source.checked;
      }
    }

＆＃13;

<script language="JavaScript">
    function toggle(source) {
      checkboxes = document.getElementsByName('foo');
      for(var checkbox in checkboxes)
        checkbox.checked = source.checked;
    }
    </script>

    <input type="checkbox" onClick="toggle(this)" /> Toggle All<br/>

    <input type="checkbox" name="foo" value="bar1"> Bar 1<br/>
    <input type="checkbox" name="foo" value="bar2"> Bar 2<br/>
    <input type="checkbox" name="foo" value="bar3"> Bar 3<br/>
    <input type="checkbox" name="foo" value="bar4"> Bar 4<br/>

＆＃13;

自定义您的盒子：

＆＃13;

$(".checkall").on("click",function(){
  $("input.single").prop("checked",$(this).is(":checked"));
  $("input.uncheckall").prop("checked",(!$(this).is(":checked")));
});
$(".uncheckall").on("click",function(){
     $("input.single").prop("checked",!($(this).is(":checked")));
     $("input.checkall").prop("checked",!($(this).is(":checked")));
});
$(".single").on("click",function(){
   if($(".single:checked").length>0){
     $("input.checkall").prop("checked",true);
     $("input.uncheckall").prop("checked",false);
     }
   else{
     $("input.uncheckall").prop("checked",true);
       $("input.checkall").prop("checked",false);
     }

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

<label>checked all</label>
<input type="checkbox" name="check123" class="checkall">
<label>unchecked all</label>
<input type="checkbox" name="check123" class="uncheckall">
<div>
<p>select</p>
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">
  <input type="checkbox" name="check123" class="single">

＆＃13;

要更改标签以全部选中/取消选中全部切换：看到这个JSFiddle并实现它我仍然在工作，并且很快就会在这篇文章中完成代码并点击这里！ 这是Fiddle嵌入：

＆＃13;

<script async src="//jsfiddle.net/kq958k3s/147/embed/result/"></script>

＆＃13;

谢谢！
另一个Fiddle：

＆＃13;

<script async src="//jsfiddle.net/Vj6wY/4925/embed/result/"></script>

＆＃13;

jquery checkall按钮和uncheckall按钮选择其他复选框

1 个答案:

简单切换框：

自定义您的盒子：