{"id":28924,"date":"2021-06-03T17:06:00","date_gmt":"2021-06-03T14:06:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=28924"},"modified":"2021-10-17T16:29:49","modified_gmt":"2021-10-17T13:29:49","slug":"casilla-de-verificacion-multiple-seleccionar-deseleccionar-usando-jquery","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/es\/casilla-de-verificacion-multiple-seleccionar-deseleccionar-usando-jquery\/","title":{"rendered":"Casilla de verificaci\u00f3n m\u00faltiple Seleccionar Deseleccionar usando jQuery"},"content":{"rendered":"<p>Mientras desarrollamos aplicaciones web, generalmente necesitamos realizar operaciones CRUD. Para la vista de lista, sol\u00edamos tener una tabla con varias filas. En cada fila, mantenemos una casilla de verificaci\u00f3n para marcar \/ desmarcar una fila espec\u00edfica. Estas casillas de verificaci\u00f3n se utilizan cuando el usuario desea eliminar una fila de la base de datos. Tambi\u00e9n puede tener una funci\u00f3n de eliminaci\u00f3n masiva donde la casilla de verificaci\u00f3n principal se usa para seleccionar \/ deseleccionar las casillas de verificaci\u00f3n secundarias.<\/p>\n<p>En este art\u00edculo, estudiamos c\u00f3mo seleccionar \/ deseleccionar varias casillas de verificaci\u00f3n usando jQuery.<\/p>\n<p>Nuestra vista final es como se muestra en la captura de pantalla a continuaci\u00f3n. Muestra la casilla de verificaci\u00f3n principal en la fila de encabezado y cada fila tiene su propia casilla de verificaci\u00f3n.<\/p>\n<\/p>\n<p>Al seleccionar la casilla de verificaci\u00f3n principal, se marcar\u00e1n todas las casillas de verificaci\u00f3n secundarias. Y cuando deseleccionamos la casilla de verificaci\u00f3n principal, las casillas de verificaci\u00f3n secundarias deben desmarcarse. Habiendo dicho eso, veamos c\u00f3mo aplicar m\u00faltiples casillas de verificaci\u00f3n seleccionar \/ deseleccionar usando jQuery.<\/p>\n<h3>Crear tabla de muestra en Bootstrap<\/h3>\n<p>Para comenzar, necesitamos una tabla con algunos registros junto con casillas de verificaci\u00f3n. En el siguiente c\u00f3digo, estoy creando una tabla ficticia usando <a href=\"https:\/\/getbootstrap.com\/docs\/4.5\/content\/tables\" target=\"_blank\" rel=\"noopener nofollow\" class=\"external external_icon\">Bootstrap<\/a>. Tambi\u00e9n agregu\u00e9 entradas ficticias en la tabla.<\/p>\n<pre><code>&lt;link rel=\"stylesheet\" href=\"https:\/\/stackpath.bootstrapcdn.com\/bootstrap\/4.5.2\/css\/bootstrap.min.css\" \/&gt;\n&lt;div class=\"container\"&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;div class=\"row\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-xs-12 col-md-8\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;table class=\"table\"&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;thead&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;&lt;input type=\"checkbox\" id=\"selectall\"\/&gt;&lt;\/th&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;First Name&lt;\/th&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Last Name&lt;\/th&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;th&gt;Username&lt;\/th&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/thead&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tbody&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" class=\"singlechkbox\" name=\"username\" value=\"1\"\/&gt;&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Mark&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Otto&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;@mdo&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" class=\"singlechkbox\" name=\"username\" value=\"2\"\/&gt;&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Jacob&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Thornton&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;@fat&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;&lt;input type=\"checkbox\" class=\"singlechkbox\" name=\"username\" value=\"3\"\/&gt;&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;Larry&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;the Bird&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;td&gt;@twitter&lt;\/td&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tr&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/tbody&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/table&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0&lt;div class=\"col-xs-6 col-md-4\"&gt;&lt;\/div&gt;\n\u00a0\u00a0\u00a0\u00a0&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Si ejecuta el archivo HTML anterior en el navegador, ver\u00e1 una tabla que contiene 4 filas. La primera fila es para prop\u00f3sitos de encabezado y la primera columna es para casillas de verificaci\u00f3n. Ahora, vamos a escribir c\u00f3digo jQuery que hace magia real en las casillas de verificaci\u00f3n.<\/p>\n<h3>C\u00f3digo jQuery que selecciona \/ deselecciona varias casillas de verificaci\u00f3n<\/h3>\n<p>jQuery proporciona m\u00e9todos y eventos mediante los cuales podemos lograr nuestro objetivo. Aqu\u00ed usar\u00e9 <code>click<\/code>evento y <code>prop<\/code>m\u00e9todo para realizar nuestra tarea.<\/p>\n<pre><code>&lt;script type=\"text\/javascript\"&gt;\njQuery(function($) {\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '#selectall', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('.singlechkbox').prop('checked', this.checked);\n\u00a0\u00a0\u00a0\u00a0});\n\u00a0\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.singlechkbox', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0if($('.singlechkbox').length == $('.singlechkbox:checked').length) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#selectall').prop('checked', true);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0} else {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$(\"#selectall\").prop('checked', false);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\u00a0\n\u00a0\u00a0\u00a0\u00a0});\n});\n&lt;\/script&gt;<\/code><\/pre>\n<p>El c\u00f3digo anterior verifica si la casilla de verificaci\u00f3n principal est\u00e1 marcada. Si es as\u00ed, marca todas las casillas de verificaci\u00f3n. Cuando desmarca la casilla de verificaci\u00f3n principal, tambi\u00e9n desmarca todas las casillas de verificaci\u00f3n secundarias.<\/p>\n<p>Espero que entienda c\u00f3mo seleccionar \/ deseleccionar casillas de verificaci\u00f3n usando jQuery. Me gustar\u00eda escuchar sus pensamientos en la secci\u00f3n de comentarios a continuaci\u00f3n.<\/p>\n<h4>Art\u00edculos relacionados<\/h4>\n<ul>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-cargar-recortar-y-cambiar-el-tamano-de-una-imagen-usando-jquery-y-php\/\" title=\"Cargar, recortar y cambiar el tama\u00f1o de la imagen usando jQuery y PHP\">Cargar, recortar y cambiar el tama\u00f1o de la imagen usando jQuery y PHP<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-agregar-un-efecto-de-imagen-de-zoom-en-las-imagenes-de-su-sitio-web\/\" title=\"Agregue efecto de imagen de zoom en las im\u00e1genes de su sitio web\">Agregue efecto de imagen de zoom en las im\u00e1genes de su sitio web<\/a><\/li>\n<li><a href=\"https:\/\/themewp.inform.click\/es\/como-implementar-jquery-datepicker-con-timepicker\/\" title=\"C\u00f3mo implementar jQuery Datepicker con Timepicker\">C\u00f3mo implementar jQuery Datepicker con Timepicker<\/a><\/li>\n<\/ul>\n<p><div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">Fuente de grabaci\u00f3n:  <a target=\"_blank\" rel=\"noopener nofollow\" href=\"\/\/artisansweb.net\" class=\"external external_icon\">artisansweb.net<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este tutorial, escribo un c\u00f3digo para varias casillas de verificaci\u00f3n, seleccione deseleccionar usando jQuery. Es necesario cuando se realizan operaciones CRUD utilizando el<\/p>\n","protected":false},"author":1,"featured_media":21662,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[253],"tags":[849],"class_list":["post-28924","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-2","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/28924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/comments?post=28924"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/posts\/28924\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media\/21662"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/media?parent=28924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/categories?post=28924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/es\/wp-json\/wp\/v2\/tags?post=28924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}