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 tan
to, 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>
Autor
¿Buscas trabajo de programador?
19 respuestas a “Seleccionar un checkbox dentro un grupo de checkboxes”
Deja una respuesta
103 artículos que te podrían interesar
Ver más sobre
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);
});
});
como usarlo con un jquery mas nuevo 2.2.3 o algo asi
hola,
En principio debería funcionar con un jquery más nuevo. que problema tienes?
Saludos
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’) ;
});
});
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???
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?
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
Hola buenas tardes, nosotros te lo podemos hacer pero nos va a llevar un tiempo que tendremos que presupuestar. Saludos
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
NO ME QUEDA MARCO LAS 3 OPCIONES Y LUEGO NO LAS DESMARCA, QUE JQUERY UTILIZASTE
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
pero no, cuando marco una casilla ya no la desmarca y pongo otra opcion y me selecciona y tampoco las desmarca
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’) ;
});
});
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>
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…..
Tengo una tabla con 5 checkbox por renglo pero solo quiero seleccionar 1 por renglon
El ejemplo que se ilustra aquí precisamente hace lo que deseas pero cada renglon en este caso es un div. No se yo si con tablas funcionará…
hola como se le puede agregar a este formulario que por ejemplo en un solo producto pueda marcar dos atributos..gracias
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