{"id":7585,"date":"2020-05-29T09:42:21","date_gmt":"2020-05-29T09:42:21","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7585"},"modified":"2020-05-29T09:42:21","modified_gmt":"2020-05-29T09:42:21","slug":"checkbox-como-un-boton-en-bootstrap-4","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/","title":{"rendered":"Checkbox como un bot\u00f3n en Bootstrap 4"},"content":{"rendered":"

Hoy he querido dedicar un art\u00edculo entero para hablar sobre la conversi\u00f3n de los inputs tipo checkbox a un estilo similar a un bot\u00f3n usando Bootstrap 4.<\/p>\n

Los estilos por defecto que tienen los navegadores para las casillas de verificaci\u00f3n (checkboxes) son muy sosos.<\/p>\n

Bootstrap lo sabe y por se ha creado una forma r\u00e1pida para darle un formato mucho mejor para su visualizaci\u00f3n.<\/p>\n

En este caso, los inputs tipo checkbox se pueden mostrar como un bot\u00f3n.<\/p>\n

La idea que voy a ilustrar en este art\u00edculo es crear varias casillas de verificaci\u00f3n (checkboxes) dentro de un grupo de botones y cada casilla de verificaci\u00f3n dentro de una etiqueta label con estilos de bot\u00f3n.<\/p>\n

Bootstrap nos permite agregar una estructura HTML para conseguir un dise\u00f1o m\u00e1s apreciable para esto.<\/p>\n

En el ejemplo en funcionamiento vas a poder ver un grupo de botones que tienen la funcionalidad de casilla de verificaci\u00f3n (checkbox) en el que estoy mostrando unos cuantos pa\u00edses de Europa a los que puedes hacer clic para seleccionarlos.<\/p>\n

F\u00edjate en el c\u00f3digo siguiente:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
<div<\/span><\/a> class<\/span>=<\/span>"btn-group btn-group-toggle"<\/span> data-toggle=<\/span>"buttons"<\/span>><\/span>\n    <label<\/span><\/a> class<\/span>=<\/span>"btn btn-primary"<\/span>><\/span>\n        <input<\/span><\/a> type<\/span>=<\/span>"checkbox"<\/span> name<\/span>=<\/span>"countries[]"<\/span> value<\/span>=<\/span>"Espa\u00f1a"<\/span> autocomplete=<\/span>"off"<\/span>><\/span> Espa\u00f1a\n    <\/<\/span>label<\/span><\/a>><\/span>\n    <label<\/span><\/a> class<\/span>=<\/span>"btn btn-primary"<\/span>><\/span>\n        <input<\/span><\/a> type<\/span>=<\/span>"checkbox"<\/span> name<\/span>=<\/span>"countries[]"<\/span> value<\/span>=<\/span>"Francia"<\/span> autocomplete=<\/span>"off"<\/span>><\/span> Francia\n    <\/<\/span>label<\/span><\/a>><\/span>\n    <label<\/span><\/a> class<\/span>=<\/span>"btn btn-primary"<\/span>><\/span>\n        <input<\/span><\/a> type<\/span>=<\/span>"checkbox"<\/span> name<\/span>=<\/span>"countries[]"<\/span> value<\/span>=<\/span>"Portugal"<\/span> autocomplete=<\/span>"off"<\/span>><\/span> Portugal\n    <\/<\/span>label<\/span><\/a>><\/span>\n    <label<\/span><\/a> class<\/span>=<\/span>"btn btn-primary"<\/span>><\/span>\n        <input<\/span><\/a> type<\/span>=<\/span>"checkbox"<\/span> name<\/span>=<\/span>"countries[]"<\/span> value<\/span>=<\/span>"Italia"<\/span> autocomplete=<\/span>"off"<\/span>><\/span> Italia\n    <\/<\/span>label<\/span><\/a>><\/span>\n    <label<\/span><\/a> class<\/span>=<\/span>"btn btn-primary"<\/span>><\/span>\n        <input<\/span><\/a> type<\/span>=<\/span>"checkbox"<\/span> name<\/span>=<\/span>"countries[]"<\/span> value<\/span>=<\/span>"Alemania"<\/span> autocomplete=<\/span>"off"<\/span>><\/span> Alemania\n    <\/<\/span>label<\/span><\/a>><\/span>\n<\/<\/span>div<\/span><\/a>><\/span><\/pre><\/div><\/div>\n
Para conseguir como resultado:<\/p>\n
\"Checkboxes<\/p>\n
Por defecto (sin Bootstrap), se ver\u00eda de la siguiente forma en Google Chrome:<\/p>\n
\"Checkboxes<\/h2>\n
F\u00edjate que gran diferencia! y con tan poco c\u00f3digo.<\/p>\n
En el ejemplo en funcionamiento, he agregado un bot\u00f3n \u00abEnviar\u00bb como extra para que puedas enviar la selecci\u00f3n al servidor. Los pa\u00edses seleccionados son recibidos con PHP.<\/p>\n
Conclusi\u00f3n<\/h2>\n
La diferencia en cuanto a aspecto es notable. Creo que vale la pena usarlo. Programar los checkboxes para que funcionen as\u00ed costar\u00eda mucho tiempo de programaci\u00f3n. Por suerte, Bootstrap ya lo ha hecho por ti, \u00bfporqu\u00e9 no aprovecharlo?<\/p>\n
Debido a que son botones, tambi\u00e9n se les puede cambiar el tama\u00f1o, colores, bordes, etc. Ver tutorial sobre botones en Bootstrap 4<\/a>.<\/p>\n
Recuerda que las casillas de verificaci\u00f3n o checkboxes el usuario puede seleccionar m\u00e1s de una opci\u00f3n. Por ese motivo, en el ejemplo en funcionamiento puse como name de los inputs un array \u00abcountries[]\u00bb para enviar al servidor todos los valores seleccionados.<\/p>\n
Para usar estas opciones tienes que tener bien instalado Bootstrap conjuntamente con sus archivos correspondientes para que pueda funcionar el JavaScript.<\/p>\n
<\/i> Ver demo<\/a> <\/i> Descargar<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Convierte f\u00e1cilmente las casillas de verificaci\u00f3n (checkbox) en botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar m\u00faltiples pa\u00edses.<\/p>\n","protected":false},"author":1,"featured_media":7590,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[163],"class_list":["post-7585","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-bootstrap"],"yoast_head":"\nCheckbox como un bot\u00f3n en Bootstrap 4 - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Convierte f\u00e1cilmente las casillas de verificaci\u00f3n (checkbox) en bot\u00f3n o botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar m\u00faltiples pa\u00edses.\" \/>\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=\"Checkbox como un bot\u00f3n en Bootstrap 4 - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Convierte f\u00e1cilmente las casillas de verificaci\u00f3n (checkbox) en bot\u00f3n o botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar m\u00faltiples pa\u00edses.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/\" \/>\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=\"2020-05-29T09:42:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/checkbox-como-un-boton-en-bootstrap-4.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\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=\"3 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-como-un-boton-en-bootstrap-4\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/\",\"name\":\"Checkbox como un bot\u00f3n en Bootstrap 4 - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/checkbox-como-un-boton-en-bootstrap-4.png\",\"datePublished\":\"2020-05-29T09:42:21+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Convierte f\u00e1cilmente las casillas de verificaci\u00f3n (checkbox) en bot\u00f3n o botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar m\u00faltiples pa\u00edses.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/checkbox-como-un-boton-en-bootstrap-4.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/checkbox-como-un-boton-en-bootstrap-4.png\",\"width\":250,\"height\":250,\"caption\":\"Checkboxes como botones con Bootstrap 4\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Checkbox como un bot\u00f3n en Bootstrap 4\"}]},{\"@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":"Checkbox como un bot\u00f3n en Bootstrap 4 - Jose Aguilar Blog","description":"Convierte f\u00e1cilmente las casillas de verificaci\u00f3n (checkbox) en bot\u00f3n o botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar m\u00faltiples pa\u00edses.","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":"Checkbox como un bot\u00f3n en Bootstrap 4 - Jose Aguilar Blog","og_description":"Convierte f\u00e1cilmente las casillas de verificaci\u00f3n (checkbox) en bot\u00f3n o botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar m\u00faltiples pa\u00edses.","og_url":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2020-05-29T09:42:21+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/checkbox-como-un-boton-en-bootstrap-4.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":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/","url":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/","name":"Checkbox como un bot\u00f3n en Bootstrap 4 - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/checkbox-como-un-boton-en-bootstrap-4.png","datePublished":"2020-05-29T09:42:21+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Convierte f\u00e1cilmente las casillas de verificaci\u00f3n (checkbox) en bot\u00f3n o botones usando Bootstrap 4 y los grupos de botones. Ejemplo que permite seleccionar m\u00faltiples pa\u00edses.","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/checkbox-como-un-boton-en-bootstrap-4.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2020\/05\/checkbox-como-un-boton-en-bootstrap-4.png","width":250,"height":250,"caption":"Checkboxes como botones con Bootstrap 4"},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/checkbox-como-un-boton-en-bootstrap-4\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Checkbox como un bot\u00f3n en Bootstrap 4"}]},{"@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\/7585","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=7585"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7585\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7590"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7585"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7585"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7585"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}