{"id":5990,"date":"2013-06-06T13:11:44","date_gmt":"2013-06-06T13:11:44","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=5990"},"modified":"2014-11-09T20:35:10","modified_gmt":"2014-11-09T20:35:10","slug":"recoger-valores-de-un-grupo-de-checkboxes-con-jquery","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/","title":{"rendered":"Recoger valores de un grupo de checkboxes con jQuery"},"content":{"rendered":"<p>En un art\u00edculo anterior ya vimos <a href=\"https:\/\/www.jose-aguilar.com\/blog\/controlar-array-de-checkboxes-con-php\/\">como controlar un grupo de checkboxes guardados en un array con PHP<\/a>. En este art\u00edculo vamos recoger los valores de un grupo de checkboxes con jQuery.<\/p>\n<p>El componente checkbox permite seleccionar una opci\u00f3n al usuario del programa o p\u00e1gina Web con el objetivo de tomar una decisi\u00f3n directamente en pantalla. Esta situaci\u00f3n se puede dar en muchos circumstancias.<\/p>\n<p>En el ejemplo que vamos a ilustrar vamos a tener un listado de paises agrupados por continentes dando la opci\u00f3n al usuario de elegir los paises que desee.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/paises.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5960\" alt=\"paises\" src=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/paises.png\" width=\"721\" height=\"376\" srcset=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/paises.png 721w, https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2013\/05\/paises-300x156.png 300w\" sizes=\"auto, (max-width: 721px) 100vw, 721px\" \/><\/a><\/p>\n<p>La idea no es m\u00e1s que un formulario con inputs checkboxes y un link para enviar. La lista de checkboxes la pondremos de la siguiente forma:<\/p>\n<pre>&lt;input type=\"checkbox\" value=\"Espa\u00f1a\" name=\"countries[]\" \/&gt;&lt;label&gt;Espa\u00f1a&lt;\/label&gt;&lt;br\/&gt;\r\n&lt;input type=\"checkbox\" value=\"Portugal\" name=\"countries[]\" \/&gt;&lt;label&gt;Portugal&lt;\/label&gt;&lt;br\/&gt;\r\n&lt;input type=\"checkbox\" value=\"Francia\" name=\"countries[]\" \/&gt;&lt;label&gt;Francia&lt;\/label&gt;&lt;br\/&gt;\r\n...\r\n&lt;p&gt;&lt;a href=\"#\" id=\"enviar\" \/&gt;Enviar&lt;\/a&gt;&lt;\/p&gt;<\/pre>\n<p>Sobretodo te tienes que fijar en el atributo \u201cname\u201d de los inputs que no es m\u00e1s que un array y tambi\u00e9n es importante su valor.<\/p>\n<p>Pero la clave del asunto viene ahora. Nos interesa controlar que paises ha checkeado el usuario. \u00bfC\u00f3mo controlaremos estos datos con jQuery?<\/p>\n<p>Necesitaremos incluir la librer\u00eda jQuery y los scripts necesarios en el &lt;head&gt; de tu p\u00e1gina:<\/p>\n<pre>&lt;script type=\"text\/javascript\" src=\"..\/jquery.js\"&gt;&lt;\/script&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function() {\r\n\u00a0\u00a0 \u00a0$('#enviar').click(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0var selected = '';\u00a0\u00a0 \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$('#formid input[type=checkbox]').each(function(){\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (this.checked) {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0selected += $(this).val()+', ';\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0}); \r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0if (selected != '') \r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0alert('Has seleccionado: '+selected); \u00a0\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0else\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0alert('Debes seleccionar al menos una opci\u00f3n.');\r\n\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0return false;\r\n\u00a0\u00a0 \u00a0});\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \u00a0\r\n});\u00a0\u00a0 \u00a0\r\n&lt;\/script&gt;<\/pre>\n<p>Aqu\u00ed lo que estamos haciendo es esperar a que se pulse en el link o bot\u00f3n con id=\u00bbenviar\u00bb y recorremos todos los checkboxes del formulario con la funci\u00f3n each de jQuery y si est\u00e1 checkeado lo vamos acumulando en una variable. Al finalizar el bucle mostramos las alertas. En este caso espec\u00edfico, si no se ha rellenado la variable selected significar\u00e1 que no se ha seleccionado ninguno, en caso contrario si que mostrar\u00edamos\u00a0 los valores de las opciones seleccionadas.<\/p>\n<p>Es importante saber que para que funcione el ejemplo, el formulario que contiene todos estos checkboxes tiene como identificador id=\u00bbformid\u00bb.<\/p>\n<p><a href=\"https:\/\/www.jose-aguilar.com\/scripts\/jquery\/checkboxes-array\/\" target=\"_blank\">Ver el ejemplo en funcionamiento<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En un art\u00edculo anterior ya vimos como controlar un grupo de checkboxes guardados en un array con PHP. En este art\u00edculo vamos recoger los valores de un grupo de checkboxes con jQuery. El componente checkbox permite seleccionar una opci\u00f3n al usuario del programa o p\u00e1gina Web con el objetivo de tomar una decisi\u00f3n directamente en [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[98,167,84],"class_list":["post-5990","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery","tag-checkboxes","tag-eventos","tag-formularios"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.6 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Recoger valores de un grupo de checkboxes con jQuery - 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=\"Recoger valores de un grupo de checkboxes con jQuery - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"En un art\u00edculo anterior ya vimos como controlar un grupo de checkboxes guardados en un array con PHP. En este art\u00edculo vamos recoger los valores de un grupo de checkboxes con jQuery. El componente checkbox permite seleccionar una opci\u00f3n al usuario del programa o p\u00e1gina Web con el objetivo de tomar una decisi\u00f3n directamente en [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/\" \/>\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=\"2013-06-06T13:11:44+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-11-09T20:35:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png\" \/>\n\t<meta property=\"og:image:width\" content=\"200\" \/>\n\t<meta property=\"og:image:height\" content=\"200\" \/>\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\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/\",\"name\":\"Recoger valores de un grupo de checkboxes con jQuery - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png\",\"datePublished\":\"2013-06-06T13:11:44+00:00\",\"dateModified\":\"2014-11-09T20:35:10+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png\",\"width\":200,\"height\":200},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Recoger valores de un grupo de checkboxes con jQuery\"}]},{\"@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":"Recoger valores de un grupo de checkboxes con jQuery - 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":"Recoger valores de un grupo de checkboxes con jQuery - Jose Aguilar Blog","og_description":"En un art\u00edculo anterior ya vimos como controlar un grupo de checkboxes guardados en un array con PHP. En este art\u00edculo vamos recoger los valores de un grupo de checkboxes con jQuery. El componente checkbox permite seleccionar una opci\u00f3n al usuario del programa o p\u00e1gina Web con el objetivo de tomar una decisi\u00f3n directamente en [&hellip;]","og_url":"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2013-06-06T13:11:44+00:00","article_modified_time":"2014-11-09T20:35:10+00:00","og_image":[{"width":200,"height":200,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.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\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/","url":"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/","name":"Recoger valores de un grupo de checkboxes con jQuery - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png","datePublished":"2013-06-06T13:11:44+00:00","dateModified":"2014-11-09T20:35:10+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2012\/12\/jquery.png","width":200,"height":200},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/recoger-valores-de-un-grupo-de-checkboxes-con-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Recoger valores de un grupo de checkboxes con jQuery"}]},{"@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\/5990","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=5990"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/5990\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/5458"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=5990"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=5990"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=5990"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}