html sélectionnez une seule case dans un groupe

Question

Alors, comment puis-je permettre à un utilisateur de sélectionner une seule case?

Je sais que les boutons radio sont "idéal", mais pour mon usage...il n'est pas.

J'ai un domaine où les utilisateurs doivent sélectionner l'une ou des deux options, mais pas les deux. Le problème est que j'ai besoin de mes utilisateurs d'être également en mesure de désélectionner l'option, et c'est là que les boutons radio échouer, car une fois que vous sélectionnez le groupe, vous devez choisir une option.

Je vais être à la validation de l'info via php, mais je voudrais encore restreindre les utilisateurs à une réponse si ils veulent lui donner.

Answer 1

Cet extrait va:

• Autoriser le regroupement comme les boutons radio
• Agir comme une radio
• Permettre de tout désélectionner

 // the selector will match all input controls of type :checkbox
// and attach a click event handler 
$("input:checkbox").on('click', function() {
  // in the handler, 'this' refers to the box clicked on
  var $box = $(this);
  if ($box.is(":checked")) {
    // the name of the box is retrieved using the .attr() method
    // as it is assumed and expected to be immutable
    var group = "input:checkbox[name='" + $box.attr("name") + "']";
    // the checked state of the group/box on the other hand will change
    // and the current value is retrieved using .prop() method
    $(group).prop("checked", false);
    $box.prop("checked", true);
  } else {
    $box.prop("checked", false);
  }
}); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div>
  <h3>Fruits</h3>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Kiwi</label>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Jackfruit</label>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[1][]" />Mango</label>
</div>
<div>
  <h3>Animals</h3>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Tiger</label>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Sloth</label>
  <label>
    <input type="checkbox" class="radio" value="1" name="fooby[2][]" />Cheetah</label>
</div> 

Answer 2

Vous voulez lier un change() gestionnaire de sorte que l'événement se déclenche lorsque l'état d'une case à cocher changements. Ensuite, il suffit de décocher toutes les cases en dehors de celui qui a déclenché le gestionnaire:

$('input[type="checkbox"]').on('change', function() {
   $('input[type="checkbox"]').not(this).prop('checked', false);
});

Voici un violon

---

Comme pour le regroupement, si vous avez eu le balisage suivant:

<div>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>  
<div>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>   
<div>
    <input type="checkbox" />
    <input type="checkbox" />
    <input type="checkbox" />
</div>

Vous pouvez faire ceci:

$('input[type="checkbox"]').on('change', function() {
   $(this).siblings('input[type="checkbox"]').not(this).prop('checked', false);
});

Voici un autre violon

---

Si votre cases sont tous des frères et sœurs, et sont regroupés par un autre attribut, comme name:

<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group1[]" />
<input type="checkbox" name="group1[]" />

<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group2[]" />
<input type="checkbox" name="group2[]" />

<input type="checkbox" name="group3[]" />
<input type="checkbox" name="group3[]" />
<input type="checkbox" name="group3[]" />

Vous pouvez faire ceci:

$('input[type="checkbox"]').on('change', function() {
    $('input[name="' + this.name + '"]').not(this).prop('checked', false);
});

Voici un autre violon

Answer 3

Les boutons radio sont idéaux. Vous avez juste besoin d'une troisième option "ni" qui est sélectionnée par défaut.

Answer 4

 $("#myform input:checkbox").change(function() {
    $("#myform input:checkbox").attr("checked", false);
    $(this).attr("checked", true);
});
 

Cela devrait fonctionner pour n'importe quel nombre de cases à cocher du formulaire. Si vous en avez d'autres qui ne font pas partie du groupe, configurez les sélecteurs avec les entrées applicables.