{"id":2803,"date":"2012-05-31T21:34:35","date_gmt":"2012-05-31T21:34:35","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=2803"},"modified":"2013-01-02T14:33:41","modified_gmt":"2013-01-02T14:33:41","slug":"checkbox-group-select","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/","title":{"rendered":"Seleccionar un checkbox dentro un grupo de checkboxes"},"content":{"rendered":"

En este art\u00edculo vamos a explicar como tener varios grupos de checkboxes en los cuales solo vamos a poder seleccionar un checkbox del grupo.<\/p>\n

En una tienda virtual lo podr\u00edamos utilizar en el caso de si quisieramos por ejemplo mostrar los atributos de un producto para seleccionar una opci\u00f3n (atributo).<\/p>\n

Por lo tan\"\"<\/a>to, si redactamos el p\u00e1rrafo anterior refiri\u00e9ndonos por ejemplo a un producto real, por ejemplo una camiseta, dir\u00edamos que tendr\u00edamos una lista de camisetas de las cuales tendr\u00e1n distintos colores que solo se podr\u00e1 elegir un color de cada camiseta.<\/p>\n

Seleccionar un \u00fanico 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\u00f3n de cada grupo.<\/p>\n

En una tienda virtual lo podr\u00edamos utilizar en el caso de si quisieramos por ejemplo mostrar los atributos de un producto para seleccionar una opci\u00f3n (atributo).<\/p>\n

Los checkboxes est\u00e1n pensados para poder seleccionar todos, ninguno o unos cuantos pero en este caso solo nos interesa uno de cada grupo.<\/p>\n

Podr\u00edamos utilizar radiobutton pero no nos sirve si tenemos distintos grupos ya que solo podr\u00edamos seleccionar una opci\u00f3n de todos los grupos.<\/p>\n

Para conseguir el efecto necesitaremos invocar la librer\u00eda jquery y realizar el siguiente script:<\/p>\n

<script type=\"text\/javascript\" src=\"..\/jquery.js\"><\/script>\r\n<script type=\"text\/javascript\">\r\n$(document).ready(function() {\r\n\u00a0\u00a0\u00a0 $('input[type=checkbox]').live('click', function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var parent = $(this).parent().attr('id');\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#'+parent+' input[type=checkbox]').removeAttr('checked');\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(this).attr('checked', 'checked');\r\n\u00a0\u00a0\u00a0 });\r\n});\r\n<\/script><\/pre>\n
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.<\/p>\n
En el HTML podr\u00edamos tener lo siguiente:<\/p>\n
<h3>Producto 1<\/h3>\r\n<div id=\"product1\">\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"1\" id=\"product-1-1\" name=\"check\" \/> Atributo 1<br\/>\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"2\" id=\"product-1-2\" name=\"check\" \/> Atributo 2<br\/>\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"3\" id=\"product-1-3\" name=\"check\" \/> Atributo 3<br\/>\r\n<\/div>\r\n<h3>Producto 2<\/h3>\r\n<div id=\"product2\">\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"1\" id=\"product-2-1\" name=\"check\" \/> Atributo 1<br\/>\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"2\" id=\"product-2-2\" name=\"check\" \/> Atributo 2<br\/>\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"3\" id=\"product-2-3\" name=\"check\" \/> Atributo 3<br\/>\r\n<\/div>\r\n<h3>Producto 3<\/h3>\r\n<div id=\"product3\">\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"1\" id=\"product-3-1\" name=\"check\" \/> Atributo 1<br\/>\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"2\" id=\"product-3-2\" name=\"check\" \/> Atributo 2<br\/>\r\n\u00a0\u00a0\u00a0 <input type=\"checkbox\" value=\"3\" id=\"product-3-3\" name=\"check\" \/> Atributo 3<br\/>\r\n<\/div><\/pre>\n
Ver ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
En este art\u00edculo 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\u00edamos utilizar en el caso de si quisieramos por ejemplo mostrar los atributos de un producto para seleccionar una opci\u00f3n (atributo). Por lo tanto, si redactamos […]<\/p>\n","protected":false},"author":1,"featured_media":2810,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[98,84],"class_list":["post-2803","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-checkboxes","tag-formularios"],"yoast_head":"\nSeleccionar un checkbox dentro un grupo de checkboxes - Jose Aguilar Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Seleccionar un checkbox dentro un grupo de checkboxes - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En este art\u00edculo 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\u00edamos utilizar en el caso de si quisieramos por ejemplo mostrar los atributos de un producto para seleccionar una opci\u00f3n (atributo). Por lo tanto, si redactamos […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2012-05-31T21:34:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-01-02T14:33:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/checkprod1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"107\" \/>\n\t<meta property=\"og:image:height\" content=\"359\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/\",\"name\":\"Seleccionar un checkbox dentro un grupo de checkboxes - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/checkprod1.png\",\"datePublished\":\"2012-05-31T21:34:35+00:00\",\"dateModified\":\"2013-01-02T14:33:41+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/checkprod1.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/checkprod1.png\",\"width\":107,\"height\":359},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Seleccionar un checkbox dentro un grupo de checkboxes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Seleccionar un checkbox dentro un grupo de checkboxes - Jose Aguilar Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Seleccionar un checkbox dentro un grupo de checkboxes - Jose Aguilar Blog","og_description":"En este art\u00edculo 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\u00edamos utilizar en el caso de si quisieramos por ejemplo mostrar los atributos de un producto para seleccionar una opci\u00f3n (atributo). Por lo tanto, si redactamos […]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2012-05-31T21:34:35+00:00","article_modified_time":"2013-01-02T14:33:41+00:00","og_image":[{"width":107,"height":359,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/checkprod1.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"2 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/","url":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/","name":"Seleccionar un checkbox dentro un grupo de checkboxes - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/checkprod1.png","datePublished":"2012-05-31T21:34:35+00:00","dateModified":"2013-01-02T14:33:41+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/checkprod1.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/05\/checkprod1.png","width":107,"height":359},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-group-select\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Seleccionar un checkbox dentro un grupo de checkboxes"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2803","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=2803"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/2803\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/2810"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=2803"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=2803"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=2803"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}