ejemplos - html selecciona solo una casilla de verificación en un grupo

checkbox php (13)

Entonces, ¿cómo puedo permitir que un usuario seleccione solo una casilla de verificación?

Sé que los botones de radio son "ideales", pero para mi propósito ... no lo es.

Tengo un campo donde los usuarios deben seleccionar cualquiera de las dos opciones, pero no ambas. El problema es que necesito que mis usuarios también puedan desmarcar su opción, y aquí es donde fallan los botones de radio porque una vez que seleccionas el grupo, debes elegir una opción.

Estaré validando la información a través de php, pero me gustaría restringir a los usuarios a una respuesta si quieren darla.

Aquí hay una solución simple de HTML y JavaScript que prefiero:

// función js para permitir solo la verificación de una casilla de verificación a la vez:

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: <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Monday" />Mon    <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Tuesday" />Tue    <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Wednesday" />Wed    <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Thursday" />Thu    <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Friday" />Fri    <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Saturday" />Sat    <input class="daychecks" onclick="checkOnlyOne(this.value);" type="checkbox" name="reoccur_weekday" value="Sunday" />Sun   <br /><br />

Debería vincular un controlador change() para que el evento se active cuando cambie el estado de una casilla de verificación. Luego, solo anule la selección de todas las casillas de verificación además de la que activó el controlador:

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

Aquí hay un violín

En cuanto a la agrupación, si su casilla de verificación "grupos" fueron todos hermanos:

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

Podrías hacer esto:

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

Aquí hay otro violín

Si sus casillas de verificación están agrupadas por otro atributo, como el 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[]" />

Podrías hacer esto:

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

Aquí hay otro violín

Este fragmento hará lo siguiente:

Permitir la agrupación como botones de radio
Actúa como Radio
Permitir deseleccionar todo

// 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); } });

Los botones de radio son ideales. Solo necesita una tercera opción "ninguna" que se selecciona de forma predeterminada.

Nigromancia:
Y sin jQuery, para una estructura de cuadros de verificación como esta:

<label> <input type="checkbox" id="mytrackers_1" name="blubb_1" value="">--- Bitte auswählen --- </label> <label> <input type="checkbox" id="mytrackers_2" name="blubb_2" value="7">Testtracker </label> <label> <input type="checkbox" id="mytrackers_3" name="blubb_3" value="3">Kundenanfrage </label> <label> <input type="checkbox" id="mytrackers_4" name="blubb_4" value="2">Anpassung </label> <label> <input type="checkbox" id="mytrackers_5" name="blubb_5" value="1" checked="checked" >Fehler </label> <label> <input type="checkbox" id="mytrackers_6" name="blubb_6" value="4">Bedienung </label> <label> <input type="checkbox" id="mytrackers_7" name="blubb_7" value="5">Internes </label> <label> <input type="checkbox" id="mytrackers_8" name="blubb_8" value="6">Änderungswunsch </label>

lo harías así:

/// 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) === ''string'') 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://.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 ((<Element>node).matches(childSelector)) // else console.log("no match"); } // End if ((<Element>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://.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;

Que este código te ayude

$(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...!''); }); });

<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <input type="checkbox" class="slectOne" data-id="1 selected"/> <input type="checkbox" class="slectOne" data-id="2 selected"/> <input type="checkbox" class="slectOne" data-id="3 selected"/> <input type="checkbox" class="slectOne" data-id="4 selected"/> <input type="checkbox" class="slectOne" data-id="5 selected"/> <input type="checkbox" class="slectOne" data-id="6 selected"/> <input type="checkbox" class="slectOne" data-id="7 selected"/> <input type="checkbox" class="slectOne" data-id="8 selected"/> <input type="checkbox" class="slectOne" data-id="9 selected"/> <input type="checkbox" class="slectOne" data-id="10 selected"/> <span id="result"></span> </body> </html>

Enlace de trabajo Haga clic aquí

Si alguien necesita una solución sin una biblioteca javascript externa, puede usar este ejemplo. Un grupo de casillas de verificación que permiten valores de 0..1. Puede hacer clic en el componente de casilla de verificación o en el texto de etiqueta asociado.

<input id="mygroup1" name="mygroup" type="checkbox" value="1" onclick="toggleRadioCheckbox(this)" /> <label for="mygroup1">Yes</label> <input id="mygroup0" name="mygroup" type="checkbox" value="0" onclick="toggleRadioCheckbox(this)" /> <label for="mygroup0">No</label> - - - - - - - - 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<fields.length; idx++) { var field = fields[idx]; if (field.checked && field!=sender) field.checked=false; } }

Trabajando con la respuesta principal, necesitaba una casilla de verificación que no utilizara nombre y excluyera alguna identificación, por lo que a continuación se muestra mi solución retocada que parece funcionar bien para mí.

function makeCheckBoxGroup() { $("input:checkbox:not(#cbx_IsDeleted)").on("change", function () { var group = $("input:checkbox:not(#cbx_IsDeleted)"); var cbx = $(this); if (cbx.is(":checked")) { group.not($(this)).prop("checked", false); $(cbx).prop("checked", true); } }); }

Ya hay algunas respuestas a esto basadas en JS puro, pero ninguna de ellas es tan concisa como me gustaría que fueran.

Aquí está mi solución basada en el uso de etiquetas de nombre (como con botones de opción) y algunas líneas de javascript.

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

<input type="checkbox" name="check" onclick="onlyOne(this)"> <input type="checkbox" name="check" onclick="onlyOne(this)"> <input type="checkbox" name="check" onclick="onlyOne(this)"> <input type="checkbox" name="check" onclick="onlyOne(this)">

la respuesta de , puede usar el siguiente código si necesita ese fragmento para más de una casilla (suponiendo que tengan diferentes nombres).

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

Ejemplo con AngularJs

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

Esto debería funcionar para cualquier cantidad de casillas de verificación en el formulario. Si tiene otros que no forman parte del grupo, configure los selectores las entradas correspondientes.