如何创建按钮以检查不可选中的复选框

Question

我有10个复选框，作为一个例子我只检查了其中两个，我需要创建一个按钮来检查另一个8框并取消选中另外两个（之前已经检查过）我怎么能这样做？

<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />

Answer 1

这里是代码的简单示例

$('input.check11').click(function(){
  $('input.check21').prop('checked',this.checked)
  $('input.check22').prop('checked', false)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-inline" role="form">
    <div class="col-xs-3">
        <div class="pic-container">

                    <label>
                        <span><input type="checkbox" name="discounting" class="check11" value="">all</span><br>
                    </label>

        </div>
    </div>
    <div class="col-xs-3">
        <div class="pic-container">

                    <label> 
                        <span><input type="checkbox"  checked name="discounting" class="check22" value="">test1</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" checked   name="discounting" class="check22" value="">test1</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
                    </label>
                    <label>
                        <span><input type="checkbox" name="discounting" class="check21" value="">test1</span><br>
                    </label>
        </div>
    </div>
</form>

Answer 2

我认为最好的方法是将类添加到要反转的每个复选框，并为每个复选框添加该类反转'checked'属性

$('button').on('click', function(){
  $('.invert').each(function(){
    var $this =  $(this);
    $this.prop('checked', !$this.prop('checked'));
  });
});

Answer 3

$(document).ready(function(){
  
    $('#button').click(function(){
      
        $('input[type="checkbox"]').each(function(){
          if($(this).prop("checked") == true){
            $(this).prop('checked', false);
           }
           else if($(this).prop("checked") == false){
            $(this).prop('checked', true);
           }
        });
      
    });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />

<input type="button" id="button" value="click">

请检查代码将帮助您

感谢

Answer 4

 $(document).ready(function () {
 
 $('#btnClick').click(function () {
     $('input[type="checkbox"]').each(function () {
        var $this =  $(this);
        $this.prop('checked', !$this.prop('checked'));
     });                            
});
            
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
<br />
<input type="button" id="btnClick" value="Click" >

Answer 5

选中此答案，您需要在所有复选框中循环，反之亦然检查

＆＃13;

＆＃13;

$('#copyButton2').on('click',function(){
$('#AllCheckbox input').each(function(){
$(this).prop('checked', !$(this).prop("checked")); 
})
})

＆＃13;

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='AllCheckbox'>
<input id="test1" type="checkbox" />test1 <br />
<input id="test2" type="checkbox" />test1 <br />
<input id="test3" type="checkbox" />test1 <br />
<input id="test4" type="checkbox" />test1 <br />
<input id="test5" type="checkbox" />test1 <br />
<input id="test6" type="checkbox" />test1 <br />
<input id="test7" type="checkbox" />test1 <br />
<input id="test8" type="checkbox" />test1 <br />
<input id="test9" type="checkbox" />test1 <br />
<input id="test10" type="checkbox" />test1 <br />
</div>
<button id="copyButton2">CheckOther</button>

＆＃13;

＆＃13;

＆＃13;