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

checkbox php

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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

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

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

Answer 5

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&#228;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">&#196;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;

Answer 6

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í

Answer 7

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

Ejemplo con AngularJs

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    angular.module(''app'', []).controller(''appc'', [''$scope'',
      function($scope) {
        $scope.selected = ''other'';
      }
    ]);
  </script>
</head>

<body ng-app="app" ng-controller="appc">
  <label>SELECTED: {{selected}}</label>
  <div>
    <input type="checkbox" ng-checked="selected==''male''" ng-true-value="''male''" ng-model="selected">Male
    <br>
    <input type="checkbox" ng-checked="selected==''female''" ng-true-value="''female''" ng-model="selected">Female
    <br>
    <input type="checkbox" ng-checked="selected==''other''" ng-true-value="''other''" ng-model="selected">Other
  </div>



</body>

</html>

Answer 12

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script>
    angular.module(''app'', []).controller(''appc'', [''$scope'',
      function($scope) {
        $scope.selected = ''male'';
      }
    ]);
  </script>
</head>

<body ng-app="app" ng-controller="appc">
  <label>SELECTED: {{selected}}</label>
  <div>
    <input type="checkbox" ng-checked="selected==''male''" ng-true-value="''male''" ng-model="selected">Male
    <br>
    <input type="checkbox" ng-checked="selected==''female''" ng-true-value="''female''" ng-model="selected">Female
    <br>
    <input type="checkbox" ng-checked="selected==''other''" ng-true-value="''other''" ng-model="selected">Other
  </div>
</body>
</html>

Answer 13

$("#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.