Checkbox com Jquery

[LuizHenriquesf]

Olá,

Preciso que quando um checkbox pai com id setor1 for clicado, todos os filhos com id subsetor1 sejam selecionados também.

Quando o checkbox pai com id setor2 for clicado, todos os filhos com id subsetor2 sejam selecionados também.

Tem como fazer isso com a biblioteca Jquery?

O script abaixo funciona para o setor1 e os subsetores 1.

<script>
$(document).ready(function(){
  $("input#setor1").click(function(){
     var checked_status = this.checked; 
 $("input#permsub1").each(function(){ this.checked = checked_status; }); 
 });
});
</script>

Editado Novembro 20, 2009 por Jonathan Queiroz
Adcionar tag's (Jonathan)

[Kelemo]

Se o script está funcionando, então qual é a dúvida?? Não entendi!!!

[LuizHenriquesf]

Se o script está funcionando, então qual é a dúvida?? Não entendi!!!

Os setores e subsetores são dinâmicos. Hoje eu tenho 3 setores, amanhã posso ter 10. Não quero que fique um script desse para cada setor.

<script>
$(document).ready(function(){
$("input#setor1").click(function(){
var checked_status = this.checked;
$("input#permsub1").each(function(){ this.checked = checked_status; });
});

$("input#setor2").click(function(){
var checked_status = this.checked;
$("input#permsub2").each(function(){ this.checked = checked_status; });
});

$("input#setor3").click(function(){
var checked_status = this.checked;
$("input#permsub3").each(function(){ this.checked = checked_status; });
});
});
</script>

Preciso deixar dinâmico, utilizar o while por exemplo. Mas não sei como.

[Jonathan Queiroz]

Tente trabalhar com classes ao invés de IDs.

[KaKarotto]

Na verdade tem sim, não é complicado fazer não.

Mas vou precisar saber como está seu html pra isso, o jQuery depende únicamente da estrutura do html.

Considerando que o checkbox pai vai estar em um mesmo container que os filhos, você poderia fazer assim:

<div class="box-check">
						<form>
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
						</form>
					</div>

					<div class="box-check">
						<form>
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
						</form>
					</div>

					<div class="box-check">
						<form>
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
						</form>
					</div>

jQuery

$('div.box-check').each(function(){
    $(this).find(':checkbox').eq(0).click(function(){            
        $(this).parent().find(':checkbox:gt(0)').attr('checked', this.checked)
    
    })
})

Posta o html, talvez de para ajudar melhor.

[LuizHenriquesf]

Na verdade tem sim, não é complicado fazer não.

Mas vou precisar saber como está seu html pra isso, o jQuery depende únicamente da estrutura do html.

Considerando que o checkbox pai vai estar em um mesmo container que os filhos, você poderia fazer assim:

<div class="box-check">
						<form>
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
						</form>
					</div>

					<div class="box-check">
						<form>
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
						</form>
					</div>

					<div class="box-check">
						<form>
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
							<input type="checkbox" />
						</form>
					</div>

jQuery

$('div.box-check').each(function(){
    $(this).find(':checkbox').eq(0).click(function(){            
        $(this).parent().find(':checkbox:gt(0)').attr('checked', this.checked)
    
    })
})

Posta o html, talvez de para ajudar melhor.

Olá, Segue o Html!

$br=1;
$chk=0;
    while(!$rst->EOF)
    {
        $cod_setor = str_replace(",",".",$rst->fields[0]);
        $cod_sistema = str_replace(",",".",$rst->fields[3]);
        if ($rst->fields[3]=='0,0')
        {
            $chk++;
            if($br!=1){    ?>
                 <br /> 
            <? } ?>
            <label class="setor"><input class="setor" name="permsub[]" id="setor<? echo $chk; ?>" type="checkbox" value="<? echo $cod_setor.",".$cod_sistema; ?>" /><? echo $rst->fields[1]; ?></label>
            <br />
                        <? $br=0;
         } else {
           ?>
         <label><input class="subsetor" name="permsub[]" id="permsub<? echo $chk; ?>" type="checkbox" value="<? echo $cod_setor.",".$cod_sistema; ?>"/><? echo $rst->fields[2]; ?>
          </label>
                <?
        }
    $rst->MoveNext();
    }

Primeiro listo o setor e todos os subsetores, depois o segundo setor e os seus subsetores...........

Pelo name do input estou pegando o chexkbox selecionados, para trabalhar com a seleção pai/filho utilizo o id do input.

No caso os setores estão nomeados como:

setor1, permsub1, permsub1, permsub1

setor2, permsub2, permsub2, permsub2