2016-08-09 24 views
0

Ich habe eine Liste von Kontrollkästchen, die ich möchte, dass die Leute einzeln ankreuzen können, oder Bulk-Tick/Unknack für die Benutzerfreundlichkeit.jQuery removeAttr blockiert erneut das Attribut

<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label> 

Das Markup für die Schaltflächen auf Bulk-tick/untick sie ist:

<p> 
    <a href="javascript:;" class="btn btn-info btn-xs" id="tick-all">Tick All</a> 
    <a href="javascript:;" class="btn btn-info btn-xs" id="untick-all">Un-Tick All</a> 
</p> 

und die JavaScript ist:

$("#tick-all").click(function() { 
    $("input[type=checkbox]").attr('checked', 'checked'); 
}); 

$("#untick-all").click(function() { 
    $("input[type=checkbox]").removeAttr('checked'); 
}); 

aber wenn ich die Tasten in der Reihenfolge klicken: tick, untick, tick , dann werden sie nur die ersten beiden Male arbeiten, und danach werden die Checkboxen nicht wieder angekreuzt.

+1

Verwenden Sie '.prop ('checked', true);' und '.prop ('checked', false);' – Tushar

Antwort

1

Spielen Sie mit prop() statt attr

$("#tick-all").click(function() { 
 
    $("input[type=checkbox]").prop('checked', true); 
 
}); 
 

 
$("#untick-all").click(function() { 
 
    $("input[type=checkbox]").prop('checked',false); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label> 
 
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label> 
 
<input type="checkbox" name="category" id="c1" /> <label for="cl">Category</label> 
 
<p> 
 
    <a href="javascript:;" class="btn btn-info btn-xs" id="tick-all">Tick All</a> 
 
    <a href="javascript:;" class="btn btn-info btn-xs" id="untick-all">Un-Tick All</a> 
 
</p>

1

Verwenden

$("input[type=checkbox]").attr('checked', true); 
$("input[type=checkbox]").attr('checked', false); 

oder

$("input[type=checkbox]").prop('checked', true); 
$("input[type=checkbox]").prop('checked', false); 
1

Benutzer JQuery Prop Methode wie unter

$("#tick-all").click(function() { 
    $("input[type=checkbox]").prop('checked', true); 
}); 

$("#untick-all").click(function() { 
    $("input[type=checkbox]").prop('checked',false); 
});