Seleccionar un checkbox dentro un grupo de checkboxes

En este artículo vamos a explicar como tener varios grupos de checkboxes en los cuales solo vamos a poder seleccionar un checkbox del grupo.

En una tienda virtual lo podríamos utilizar en el caso de si quisieramos por ejemplo mostrar los atributos de un producto para seleccionar una opción (atributo).

Por lo tanto, si redactamos el párrafo anterior refiriéndonos por ejemplo a un producto real, por ejemplo una camiseta, diríamos que tendríamos una lista de camisetas de las cuales tendrán distintos colores que solo se podrá elegir un color de cada camiseta.

Seleccionar un único checkbox de un grupo de checkboxes como si se tratara de un radio button pero con la ventaja de poder tener varios grupos de checkboxes podiendo seleccionar una opción de cada grupo.

En una tienda virtual lo podríamos utilizar en el caso de si quisieramos por ejemplo mostrar los atributos de un producto para seleccionar una opción (atributo).

Los checkboxes están pensados para poder seleccionar todos, ninguno o unos cuantos pero en este caso solo nos interesa uno de cada grupo.

Podríamos utilizar radiobutton pero no nos sirve si tenemos distintos grupos ya que solo podríamos seleccionar una opción de todos los grupos.

Para conseguir el efecto necesitaremos invocar la librería jquery y realizar el siguiente script:

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('input[type=checkbox]').live('click', function(){
        var parent = $(this).parent().attr('id');
        $('#'+parent+' input[type=checkbox]').removeAttr('checked');
        $(this).attr('checked', 'checked');
    });
});
</script>

Cada vez que se haga click en un checkbox, se deseleccionan todos los checkboxes del grupo y se checkea el que se acaba de clickear.

En el HTML podríamos tener lo siguiente:

<h3>Producto 1</h3>
<div id="product1">
    <input type="checkbox" value="1" id="product-1-1" name="check" /> Atributo 1<br/>
    <input type="checkbox" value="2" id="product-1-2" name="check" /> Atributo 2<br/>
    <input type="checkbox" value="3" id="product-1-3" name="check" /> Atributo 3<br/>
</div>
<h3>Producto 2</h3>
<div id="product2">
    <input type="checkbox" value="1" id="product-2-1" name="check" /> Atributo 1<br/>
    <input type="checkbox" value="2" id="product-2-2" name="check" /> Atributo 2<br/>
    <input type="checkbox" value="3" id="product-2-3" name="check" /> Atributo 3<br/>
</div>
<h3>Producto 3</h3>
<div id="product3">
    <input type="checkbox" value="1" id="product-3-1" name="check" /> Atributo 1<br/>
    <input type="checkbox" value="2" id="product-3-2" name="check" /> Atributo 2<br/>
    <input type="checkbox" value="3" id="product-3-3" name="check" /> Atributo 3<br/>
</div>

Ver ejemplo en funcionamiento

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
(14 votos, promedio: 5 de 5)
Comparte en las redes sociales
¿Buscas trabajo de programador?

19 respuestas a “Seleccionar un checkbox dentro un grupo de checkboxes”

  1. alvaroggallardo dice:

    Para usarlo con una versión más moderna de Jquery, 3.1.1.

    $(document).ready(function() {
    $(‘input[type=checkbox]’).on(‘click’, function(){
    var parent = $(this).parent().attr(‘id’);
    $(‘#’+parent+’ input[type=checkbox]’).prop(‘checked’,false)
    $(this).prop(‘checked’, true);
    });
    });

  2. jorge dice:

    como usarlo con un jquery mas nuevo 2.2.3 o algo asi

  3. LUIS dice:

    ESTE CODIGO ES ALGO MEJORADO CON LA OPCION DE QUE SEA OPCIONABLE SELECCIONAR UNA OPCION NO OBLIGATORIA
    var _tip_check=»;
    $(document).ready(function() {
    $(‘input[type=checkbox]’).live(‘click’, function(){

    if ($(this).is(‘:checked’ || _tip_check != $(this).attr(‘id’))){
    var parent = $(this).parent().attr(‘id’);
    $(‘#’+parent+’ input[type=checkbox]’).removeAttr(‘checked’);
    $(this).attr(‘checked’, ‘checked’);
    }
    else
    $(this).removeAttr(‘checked’);

    if (_tip_check != $(this).attr(‘id’))
    _tip_check = $(this).attr(‘id’) ;
    });
    });

  4. cesar dice:

    muy bueno tu ejemplo, gracias por compartirlo. Me funciona únicamente si lo hago con el jquery que usaste. Hay forma de hacerlo con javascript puro??? sin jquery???

  5. Dinh dice:

    No funciona, hay alguna manera de seleccionar solo un checkbox de un grupo donde todos tienen el mismo id o se tiene q diferenciar entre id por grupo?

  6. Norberto dice:

    Hola, tengo en WP una plantilla de Realia, quiero hacer un formulario con varios checkbox para seleccionar un Barrio(Sububicacion), pero no se como hacerlo, porque lo intente con el plugin Content Form 7 pero no quiero que me envíe un email, debería hacerlo desde el menú que se despliegue locación y de ahí sublocación para poder seleccionar el barrio donde se encuentra la propiedad que previamente cargue. Si podes ayudarme desde ya muy agradecido. Sl2

  7. luis dice:

    Hola tengo el problema que si selecciono un producto pero no deseo comprarlo a la final no lo puedo desseleccionar…

    Atributo 1, 2 , 3 despues de seleccionar cualquiera de los tres no me deja quiter o desseleccionar cuando quiero dejar vacio. (En caso de que el usuario no desee ese producto pero ya haya hecho click en algun atributo).

    jquery.js

  8. carlos dice:

    NO ME QUEDA MARCO LAS 3 OPCIONES Y LUEGO NO LAS DESMARCA, QUE JQUERY UTILIZASTE

    • Jose Aguilar dice:

      Hola buenas tardes,

      Utilizé la versión que estaba disponible en el momento de la creación de esta entrada.

      jQuery JavaScript Library v1.3.2

      Saludos

      • carlos dice:

        pero no, cuando marco una casilla ya no la desmarca y pongo otra opcion y me selecciona y tampoco las desmarca

        • LUIS dice:

          CON ESTA OPCION PUEDES HACERLO
          var _tip_check=»;
          $(document).ready(function() {
          $(‘input[type=checkbox]’).live(‘click’, function(){

          if ($(this).is(‘:checked’ || _tip_check != $(this).attr(‘id’))){
          var parent = $(this).parent().attr(‘id’);
          $(‘#’+parent+’ input[type=checkbox]’).removeAttr(‘checked’);
          $(this).attr(‘checked’, ‘checked’);
          }
          else
          $(this).removeAttr(‘checked’);

          if (_tip_check != $(this).attr(‘id’))
          _tip_check = $(this).attr(‘id’) ;
          });
          });

  9. gorras dice:

    no me funciona

    <!DOCTYPE html>
    <html>
    <head>
    <script type=\"text/javascript\" src=\"jquery-1.10.2.js\"></script>
    <script>
    $(document).ready(function() {
    $(\’input[type=checkbox]\’).live(\’click\’, function(){
    var parent = $(this).parent().attr(\’id\’);
    $(\’#\’+parent+\’ input[type=checkbox]\’).removeAttr(\’checked\’);
    $(this).attr(\’checked\’, \’checked\’);
    });
    });
    </script>
    </head>
    <body>
    <h3>Producto 1</h3>
    <div id=\"product1\">
    <input type=\"checkbox\" value=\"1\" id=\"product-1-1\" name=\"check\" /> Atributo 1<br/>
    <input type=\"checkbox\" value=\"2\" id=\"product-1-2\" name=\"check\" /> Atributo 2<br/>
    <input type=\"checkbox\" value=\"3\" id=\"product-1-3\" name=\"check\" /> Atributo 3<br/>
    </div>
    <h3>Producto 2</h3>
    <div id=\"product2\">
    <input type=\"checkbox\" value=\"1\" id=\"product-2-1\" name=\"check\" /> Atributo 1<br/>
    <input type=\"checkbox\" value=\"2\" id=\"product-2-2\" name=\"check\" /> Atributo 2<br/>
    <input type=\"checkbox\" value=\"3\" id=\"product-2-3\" name=\"check\" /> Atributo 3<br/>
    </div>
    <h3>Producto 3</h3>
    <div id=\"product3\">
    <input type=\"checkbox\" value=\"1\" id=\"product-3-1\" name=\"check\" /> Atributo 1<br/>
    <input type=\"checkbox\" value=\"2\" id=\"product-3-2\" name=\"check\" /> Atributo 2<br/>
    <input type=\"checkbox\" value=\"3\" id=\"product-3-3\" name=\"check\" /> Atributo 3<br/>
    </div>
    </body>
    </html>

  10. Tatiana Moreira dice:

    Hola necesito ayuda….
    Tengo un formulario dividido en varios grupos cada grupo tiene varios check, lo que necesito es que al seleccionar el check principal de cada grupo se me habiliten los otros check alterno pero que nose descarque el check principal…..

  11. edmundo dice:

    Tengo una tabla con 5 checkbox por renglo pero solo quiero seleccionar 1 por renglon

  12. pachyta dice:

    hola como se le puede agregar a este formulario que por ejemplo en un solo producto pueda marcar dos atributos..gracias

    • Jose Aguilar dice:

      Hola,
      Seguro que hay varias formas de hacerlo. La primera que se me ocurre es recorrer los checkboxes de atributos con un each de jquery y comprobar que haya marcado 2.

      Espero te sirva,
      Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre