web-dev-qa-db-fra.com

Twitter Bootstrap Button Contrôle des groupes Radio Boutons/cases

J'essaie d'utiliser le groupe de boutons Twitter Bootstrap comme un ensemble réel de contrôles de saisie de formulaire. Par défaut, ces groupes de boutons peuvent fonctionner comme des boutons radio ou des cases à cocher, mais comme ils utilisent l'élément <button>, ils ne peuvent pas être utilisés comme des boutons radio ou des cases à cocher.

Dans mes recherches, j'ai trouvé ce site qui utilise CSS pour que ces boutons d'amorçage contrôlent réellement les boutons radio et les cases à cocher. Le seul problème est qu'ils utilisent des fonctionnalités assez récentes de CSS pour fonctionner et, par conséquent, nécessitent IE9 ou une version ultérieure pour fonctionner.

Je voudrais étendre le support à IE8. Existe-t-il une autre solution (peut-être contrôlée par JS) qui offrirait les mêmes fonctionnalités que le lien ci-dessus sans les exigences CSS sévères?

Merci pour votre temps.

javascripthtmlcsstwitter-bootstrap
47
Oliver Spryn

Bootstrap 3 a une solution "native" ...

Il existe maintenant une "vraie" solution Bootstrap pour ce problème, qui semble également fonctionner correctement sur les navigateurs plus anciens. Voici à quoi ça ressemble:

// get selection
$('.colors input[type=radio]').on('change', function() {
    console.log(this.value);
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="btn-group colors" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
  </label>
</div>

<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Voir la documentation Bootstrap appropriée pour plus d'informations.

Bootstrap 4

Bootstrap 4 prend en charge le composant de la même manière que Bootstrap 3 , mais Bootstrap 4 ne prend pas en charge IE9 . Vous voudrez peut-être consulter le fichier Bootstrap IE8 project.

132
maciek

Bootstrap 2

Essayez ce violon

HTML:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>

Script:

$(".btn-group button").click(function () {
    $("#buttonvalue").val($(this).text());
});

puis obtenir buttonvalue côté serveur

23
Eonasdan

Avec Bootstrap 3.2, insérez l'entrée cachée au milieu du conteneur de votre groupe de boutons. Au lieu du contenu du texte, nous prenons la valeur du champ data-value.

<div id="test" class="btn-group checkit" data-toggle="buttons-radio">
    <button type="button" data-value="1" class="btn btn-default active">Yes</button>
    <input type='hidden' name="testfield" value='1'>
    <button type="button" data-value="0" class="btn btn-default ">No</button>
</div>

Insérez maintenant un petit extrait de code javascript dans la partie onload de votre modèle.

$('.checkit .btn').click(function() {
    $(this).parent().find('input').val($(this).data("value"));
});

Il suffit donc d'ajouter .checkit à votre groupe de boutons et d'insérer un champ de saisie masqué.

Avec bootstrap 3.2, vous pouvez utiliser des groupes de boutons directement avec des entrées radio ou à cases à cocher

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="options" id="option1" value="1" /> Yes
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option2" value="0" /> No
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option3" value="42" /> Whatever
    </label>
</div>

Voir ici: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

4
RubbelDeCatc

Vous pouvez utiliser des éléments de formulaire masqués et javascript pour utiliser l'état du bouton afin de déclencher les états des éléments de formulaire.

0
BahamutWC

Solution CSS uniquement:

HTML:

<div class="btn-group">
    <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label>
    <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label>
</div>

SCSS/LESS:

 label.btn {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;

    span {
      display: block;
      padding: 10px 15px;
    }

    input[type=checkbox] {
      display: none;
    }

    input:checked + span {
      display: block;
      color: #fff;
      background-color: #285e8e;
    }
  }

JSfiddle ici

0
oboshto