Seleccionar un grupo de chekbox’s con javascript

El siguiente script muestra varios grupos de checkbox’s que se pueden seleccionar/deseleccionar pulsando un checkbox padre.

Tenemos el siguiente <div> que muestra los checkbox’s, tanto el padre como sus hijos:

<div style="border:solid 1px black; margin:4px;">
    <p> <input type="checkbox" onchange="cambiaGrupo(this)" />    TODOS / NINGUNO</p>
    <p> <input type="checkbox" /> chk1</p>
    <p> <input type="checkbox" /> chk2</p>
    <p> <input type="checkbox" /> chk3</p>
    <p> <input type="checkbox" /> chk4</p>
</div>

Si nos fijamos en el código, vemos que en el input padre llamamos a una función al cambiar su valor. Esta función es la siguiente:

<script>

function cambiaGrupo(chk) {
    var padreDIV=chk;
    while( padreDIV.nodeType==1 && padreDIV.tagName.toUpperCase()!="DIV" )
        padreDIV=padreDIV.parentNode;
    //ahora que padreDIV es el DIV, cogeremos todos sus checkboxes
    var padreDIVinputs=padreDIV.getElementsByTagName("input");
    for(var i=0; i<padreDIVinputs.length; i++) {
        if( padreDIVinputs[i].getAttribute("type")=="checkbox" )
            padreDIVinputs[i].checked = chk.checked;
    }
}

</script>

La función se encarga de seleccionar o deseleccionar el grupo de checkboxes del padre.

Ver ejemplo en funcionamiento

Autor

Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.

Te ha servido? Valora esta entrada!

(1 voto, promedio: 5 de 5)

Comparte en las redes sociales

¿Buscas trabajo de programador?

9 respuestas a “Seleccionar un grupo de chekbox’s con javascript”

leadership skill dice:

05/04/2014 a las 8:12

An interesting discussion is worth comment. There’s no doubt that that you ought to write more about this topic, it may not be a taboo matter but generally people do not talk about these topics. To the next! Kind regards!!

Responder
climatiseur mobile dice:

25/02/2012 a las 22:04

You are a very smart person!

Responder
ceramic watches dice:

24/02/2012 a las 23:25

That is very fascinating, You are an excessively professional blogger. I have joined your feed and look forward to in the hunt for more of your wonderful post. Additionally, I have shared your web site in my social networks!

Responder
chaussure de foot dice:

15/02/2012 a las 15:45

I really appreciate this post. I have been looking everywhere for this! Thank goodness I found it on Bing. You’ve made my day! Thanks again!

Responder
Filmy torrenty dice:

10/02/2012 a las 16:08

Howdy! I’m at work surfing around your blog from my new apple iphone! Just wanted to say I love reading your blog and look forward to all your posts! Carry on the outstanding work!

Responder
diet plan dice:

10/02/2012 a las 11:13

As I website owner I believe the written content here is real fantastic , appreciate it for your efforts.

Responder
plus size blouson swimsuits dice:

05/02/2012 a las 22:22

I know this site provides quality based posts and extra information, is there any other web site which presents such things in quality?

Responder
agen bola sbobet dice:

04/02/2012 a las 5:35

Great post, I think blog owners should larn a lot from this weblog its real user genial . «You don’t have to deserve your mother’s love. You have to deserve your father’s.» by Robert Frost.

Responder
Tynisha Fallin dice:

03/02/2012 a las 8:03

I got what you mean , regards for posting .Woh I am happy to find this website through google. «If one does not know to which port one is sailing, no wind is favorable.» by Seneca.

Responder