El siguiente script muestra varios grupos de checkbox’s que se pueden seleccionar\/deseleccionar pulsando un checkbox padre.<\/p>\n
Tenemos el siguiente <div> que muestra los checkbox’s, tanto el padre como sus hijos:<\/p>\n
<div style=\"border:solid 1px black; margin:4px;\">\r\n <p> <input type=\"checkbox\" onchange=\"cambiaGrupo(this)\" \/> TODOS \/ NINGUNO<\/p>\r\n <p> <input type=\"checkbox\" \/> chk1<\/p>\r\n <p> <input type=\"checkbox\" \/> chk2<\/p>\r\n <p> <input type=\"checkbox\" \/> chk3<\/p>\r\n <p> <input type=\"checkbox\" \/> chk4<\/p>\r\n<\/div><\/pre>\nSi nos fijamos en el c\u00f3digo, vemos que en el input padre llamamos a una funci\u00f3n al cambiar su valor. Esta funci\u00f3n es la siguiente:<\/p>\n
<script>\r\n\r\nfunction cambiaGrupo(chk) {\r\n var padreDIV=chk;\r\n while( padreDIV.nodeType==1 && padreDIV.tagName.toUpperCase()!=\"DIV\" )\r\n padreDIV=padreDIV.parentNode;\r\n \/\/ahora que padreDIV es el DIV, cogeremos todos sus checkboxes\r\n var padreDIVinputs=padreDIV.getElementsByTagName(\"input\");\r\n for(var i=0; i<padreDIVinputs.length; i++) {\r\n if( padreDIVinputs[i].getAttribute(\"type\")==\"checkbox\" )\r\n padreDIVinputs[i].checked = chk.checked;\r\n }\r\n}\r\n\r\n<\/script><\/pre>\nLa funci\u00f3n se encarga de seleccionar o deseleccionar el grupo de checkboxes del padre.<\/p>\n