Activer la case à cocher sur Twitter Bootstrap

J'ai fait un groupe de cases à cocher avec Twitter Bootstrap. Maintenant, je voudrais faire un "tout sélectionner" ou "désélectionner tout". Comment ai-je pu faire cela à l'aide d'une fonction JS?

Le Twitter Bootstrap, documentation dit d'utiliser $().bouton('toggle') mais ça ne fonctionne pas.

Voici mon extrait de code:

<div class="control-group">
<div class="controls">
    <div class="input">
        <div class="btn-group">
            <label class="btn  btn-toggle" for="colors-1-toggle-0">
                <input type="checkbox" id="colors-1-toggle-0" name="colors-1[]" value="color_c" />C
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-1">
                <input type="checkbox" id="colors-1-toggle-1" name="colors-1[]" value="color_m" />M
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-2">
                <input type="checkbox" id="colors-1-toggle-2" name="colors-1[]" value="color_y" />Y
            </label>
            <label class="btn  btn-toggle" for="colors-1-toggle-3">
                <input type="checkbox" id="colors-1-toggle-3" name="colors-1[]" value="color_k" />K
            </label>
        </div>
    </div>
</div></div>

source d'informationauteur RodMarx

  1. 14

    Techniquement, le Twitter Bootstrap Boutons plugin est prévu pour fonctionner avec une <button> éléments et leur comportement comme s'ils étaient radio ou une case à cocher entrées.

    Aussi, $().button('toggle') est juste pseudo code, et, dans la pratique, est destiné à être utilisé avec un sélecteur, par exemple, $('.btn-toggle').button('toggle'). Cependant, votre exemple est un peu de mauvaise qualité, puisque vous avez attribué des classes destinées pour les boutons de <label> éléments.

    De toute façon, malgré tout, si tout ce que vous voulez faire est de régler l'ensemble de vos boîtes de saisie de vrai, vous pouvez utiliser quelque chose comme:

    $('.btn-group input[type="checkbox"]').prop('checked', true);

    JSFiddle

    Si vous voulais le faire avec <button> éléments, il serait quelque chose comme ceci:

    JSFiddle

    Cependant, que les gouttes d'un tas de données d'entrée qui vous travaillez.

  2. 8

    Merci merv! Grâce à vous je suis venu à cette solution:

    <button id="toggle-colors" class="btn btn-info">Toggle</button>
<script>
    $('#toggle-colors').click(function() {
        $('.btn-group input[name^="colors"]').each(function(){
            //toggle checkbox
            $(this).prop('checked',!$(this).prop('checked'));
            //toggle class
            $(this).parents('label').toggleClass('active');
        });
    });
</script>

    Je n'utilisez pas le bouton marquer comme Twitter Bootstrap recommande car elle permet de ne pas envoyer la valeur par la POSTE.

  3. 3

    J'ai trouvé un moyen de le faire sans JS

    http://codepen.io/ibanez182/pen/WxKABq/

    <div class="form-group">
    <div class="checkbox">
        <label data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
            <input type="checkbox"/> A checkbox
        </label>
    </div>
</div>
<div id="collapseOne" aria-expanded="false" class="collapse">
    <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe ut molestias eius, nam neque esse eos modi corrupti harum fugit, hic recusandae praesentium, minima ipsa eligendi architecto at! Culpa, explicabo.</div>
</div>