Wie man eine Schaltfläche erstellt, um die Checkbox zu deaktivieren

Question

Ich habe 10 Checkboxen und als Beispiel habe ich nur zwei von ihnen überprüft und ich muss eine Schaltfläche erstellen, um die anderen 8 Kontrollkästchen zu deaktivieren und die anderen beiden (die bereits überprüft) Wie Ich kann dies tun?

<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

ich, was der beste Ansatz ist die Klasse zu jedem Kontrollkästchen hinzuzufügen, die Sie invertieren möchten, und für jede Option mit dieser Klasse Invert ‚geprüft‘ Eigenschaft

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

Answer 2

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

Bitte überprüfen Sie den Code wird Ihnen helfen

dank

Answer 3

$(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 4

hier einfaches Beispiel für Ihren Code

$('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 5

prüfen Diese Antwort, müssen Sie in allen Kontrollkästchen und umgekehrt Scheck Schleife

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

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