J'ai une liste de cases à cocher que je veux que les gens puissent cocher individuellement, ou cocher / décocher en vrac pour en faciliter l'utilisation.

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

Le balisage des boutons pour les cocher / décocher en masse est:

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

Et le JavaScript est:

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

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

Mais lorsque je clique sur les boutons dans l'ordre: tick, untick, tick, ils ne fonctionneront que les deux premières fois, et après cela, les cases à cocher ne seront plus cochées.

0
Joshua Crocker 9 août 2016 à 15:10

3 réponses

Meilleure réponse

Jouez avec prop() au lieu de 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
jonju 9 août 2016 à 12:14

Utilisation

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

Ou

$("input[type=checkbox]").prop('checked', true);
$("input[type=checkbox]").prop('checked', false);
1
Mayank Pandeyz 9 août 2016 à 12:14

Méthode Jquery Prop utilisateur comme ci-dessous

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

$("#untick-all").click(function () {
  $("input[type=checkbox]").prop('checked',false);
});
1
Shahid Ahmad 9 août 2016 à 12:15