html sélectionnez une seule case dans un groupe

Alors, comment puis-je autoriser un utilisateur à ne sélectionner qu’une seule case?

Je sais que les boutons radio sont “idéaux”, mais pour mon but … ce n’est pas le cas.

J’ai un champ où les utilisateurs doivent sélectionner l’une ou l’autre des deux options, mais pas les deux. Le problème est que j’ai besoin que mes utilisateurs puissent également désélectionner leur option, et que les boutons radio échouent car une fois que vous sélectionnez le groupe, vous devez choisir une option.

Je vais valider les informations via php, mais je voudrais quand même limiter les utilisateurs à une réponse s’ils le souhaitent.

Cet extrait va:

  • Autoriser le regroupement comme des boutons radio
  • Agir comme une radio
  • Permet de désélectionner tout
// 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 resortingeved 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 resortingeved using .prop() method $(group).prop("checked", false); $box.prop("checked", true); } else { $box.prop("checked", false); } }); 
  

Fruits

Animals

Vous souhaitez lier un gestionnaire change() pour que l’événement se déclenche lorsque l’état d’une case à cocher change. Ensuite, désélectionnez toutes les cases à cocher en dehors de celle qui a déclenché le gestionnaire:

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

Voici un violon


En ce qui concerne le regroupement, si vos cases à cocher “groupes” étaient toutes:

 

Vous pourriez faire ceci:

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

Voici un autre violon


Si vos cases à cocher sont regroupées par un autre atsortingbut, tel que name :

          

Vous pourriez faire ceci:

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

Voici un autre violon

Les boutons radio sont idéaux. Vous avez juste besoin d’une troisième option “aucune” qui est sélectionnée par défaut.

 $("#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 dans le formulaire. Si vous en avez d’autres qui ne font pas partie du groupe, configurez les sélecteurs sur les entrées applicables.

Que ce code vous aide.

 $(document).ready(function(){ $('.slectOne').on('change', function() { $('.slectOne').not(this).prop('checked', false); $('#result').html($(this).data( "id" )); if($(this).is(":checked")) $('#result').html($(this).data( "id" )); else $('#result').html('Empty...!'); }); }); 
                    

Il y a déjà quelques réponses à cela basées sur JS pur, mais aucune n’est aussi concise que je le souhaiterais.

Voici ma solution basée sur l’utilisation de tags de nom (comme avec les boutons radio) et de quelques lignes de javascript.

 function onlyOne(checkbox) { var checkboxes = document.getElementsByName('check') checkboxes.forEach((item) => { if (item !== checkbox) item.checked = false }) } 
     

En vous basant sur la réponse de Billyonecan , vous pouvez utiliser le code suivant si vous avez besoin de cet extrait pour plusieurs cases à cocher (en supposant qu’elles aient des noms différents).

  $('input.one').on('change', function() { var name = $(this).attr('name'); $('input[name='+name+'].one').not(this).prop('checked', false); }); 

Voici une solution HTML et JavaScript simple que je préfère:

// Fonction js pour ne permettre que la vérification d’une case à la fois:

 function checkOnlyOne(b){ var x = document.getElementsByClassName('daychecks'); var i; for (i = 0; i < x.length; i++) { if(x[i].value != b) x[i].checked = false; } } Day of the week: Mon    Tue    Wed    Thu    Fri    Sat    Sun   

Exemple avec AngularJs

          
Male
Female
Other
          
Male
Female
Other

Si quelqu’un a besoin d’une solution sans une bibliothèque javascript externe, vous pouvez utiliser cet exemple. Un groupe de cases à cocher autorisant les valeurs 0..1. Vous pouvez cliquer sur le composant de la case à cocher ou sur le texte de l’étiquette associée.

      - - - - - - - - function toggleRadioCheckbox(sender) { // RadioCheckbox: 0..1 enabled in a group if (!sender.checked) return; var fields = document.getElementsByName(sender.name); for(var idx=0; idx 

Nécromancie:
Et sans jQuery, pour une structure de case à cocher comme celle-ci:

         

vous le feriez comme ceci:

  /// attach an event handler, now or in the future, /// for all elements which match childselector, /// within the child tree of the element maching parentSelector. function subscribeEvent(parentSelector, eventName, childSelector, eventCallback) { if (parentSelector == null) throw new ReferenceError("Parameter parentSelector is NULL"); if (childSelector == null) throw new ReferenceError("Parameter childSelector is NULL"); // nodeToObserve: the node that will be observed for mutations var nodeToObserve = parentSelector; if (typeof (parentSelector) === 'ssortingng') nodeToObserve = document.querySelector(parentSelector); var eligibleChildren = nodeToObserve.querySelectorAll(childSelector); for (var i = 0; i < eligibleChildren.length; ++i) { eligibleChildren[i].addEventListener(eventName, eventCallback, false); } // Next i // https://stackoverflow.com/questions/2712136/how-do-i-make-this-loop-all-children-recursively function allDescendants(node) { if (node == null) return; for (var i = 0; i < node.childNodes.length; i++) { var child = node.childNodes[i]; allDescendants(child); } // Next i // IE 11 Polyfill if (!Element.prototype.matches) Element.prototype.matches = Element.prototype.msMatchesSelector; if (node.matches) { if (node.matches(childSelector)) { // console.log("match"); node.addEventListener(eventName, eventCallback, false); } // End if ((node).matches(childSelector)) // else console.log("no match"); } // End if ((node).matches) // else console.log("no matchfunction"); } // End Function allDescendants // Callback function to execute when mutations are observed var callback = function (mutationsList, observer) { for (var _i = 0, mutationsList_1 = mutationsList; _i < mutationsList_1.length; _i++) { var mutation = mutationsList_1[_i]; // console.log("mutation.type", mutation.type); // console.log("mutation", mutation); if (mutation.type == 'childList') { for (var i = 0; i < mutation.addedNodes.length; ++i) { var thisNode = mutation.addedNodes[i]; allDescendants(thisNode); } // Next i } // End if (mutation.type == 'childList') // else if (mutation.type == 'attributes') { console.log('The ' + mutation.attributeName + ' attribute was modified.'); } // Next mutation }; // End Function callback // Options for the observer (which mutations to observe) var config = { attributes: false, childList: true, subtree: true }; // Create an observer instance linked to the callback function var observer = new MutationObserver(callback); // Start observing the target node for configured mutations observer.observe(nodeToObserve, config); } // End Function subscribeEvent function radioCheckbox_onClick() { // console.log("click", this); let box = this; if (box.checked) { let name = box.getAttribute("name"); let pos = name.lastIndexOf("_"); if (pos !== -1) name = name.substr(0, pos); let group = 'input[type="checkbox"][name^="' + name + '"]'; // console.log(group); let eles = document.querySelectorAll(group); // console.log(eles); for (let j = 0; j < eles.length; ++j) { eles[j].checked = false; } box.checked = true; } else box.checked = false; } // https://stackoverflow.com/questions/9709209/html-select-only-one-checkbox-in-a-group function radioCheckbox() { // on instead of document... let elements = document.querySelectorAll('input[type="checkbox"]') for (let i = 0; i < elements.length; ++i) { // console.log(elements[i]); elements[i].addEventListener("click", radioCheckbox_onClick, false); } // Next i } // End Function radioCheckbox function onDomReady() { console.log("dom ready"); subscribeEvent(document, "click", 'input[type="checkbox"]', radioCheckbox_onClick ); // radioCheckbox(); } if (document.addEventListener) document.addEventListener("DOMContentLoaded", onDomReady, false); else if (document.attachEvent) document.attachEvent("onreadystatechange", onDomReady); else window.onload = onDomReady; function onPageLoaded() { console.log("page loaded"); } if (window.addEventListener) window.addEventListener("load", onPageLoaded, false); else if (window.attachEvent) window.attachEvent("onload", onPageLoaded); else window.onload = onPageLoaded; 
 //Here is a solution using JQuery one two three