Preciso de uma funcionalidade em que os Checkbox estejam aninhados entre si.
Dessa forma, o elemento pai selecionaria todos os filhos e assim por diante.
Minha lógica foi a seguinte:
Como vou receber esses dados externamente, eu consigo manipular os ids e as class desse checkbox
Assim, se eu criar uma classe pai que tem em todos os atributos que receberão essa funcionalidade e concatenar uma class específica aos filhos, eu tenho uma relação entre os dois.
Exemplo: o elemento cujo a class é pai e o id é idPai, teria uma relaçao a todos os checkbox cujo a class seja filhoidPai
Essa é a estrutura do HTML que eu utilizei:
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input pai" type="checkbox" id="idPai">
<label class="form-check-label" for="gridCheck1">
Checkbox exemplo
</label>
</div>
<ul style="display: inline-block; text-decoration: none; list-style: none;">
<li>
<div class="form-check">
<input class="form-check-input filhoidPai" type="checkbox" id="idOption1">
<label class="form-check-label" for="gridCheck1">
Checkbox exemplo
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input filhoidPai" type="checkbox" id="idOption2">
<label class="form-check-label" for="gridCheck1">
Checkbox exemplo
</label>
</div>
</li>
</ul>
</div>
</div>
Nesse código vemos que o idPai tem a class pai, portanto ele controla o estado de todos que tem o seu nome (nesse casso, todos os filhoidPai). Dessa forma, para esse problema o script abaixo atende a minha situação:
$(".pai").on("change", function (e) {
var select = ".filho" + $(this).attr("id")
var isChecked = $(this).prop('checked');
$(select).each(function (e) {
$(this).prop("checked", isChecked);
})
});
Porém (é ai que vem a dúvida), quando eu tento adicionar mais um nível nessa hierarquia (ou seja, um pai que também é filho), as coisas ficam um pouco diferentes...
<div class="form-group row">
<div class="col-sm-2">Checkbox</div>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input pai" type="checkbox" id="idPai">
<label class="form-check-label" for="gridCheck1">
Checkbox exemplo
</label>
</div>
<ul style="display: inline-block; text-decoration: none; list-style: none;">
<li>
<div class="form-check">
<input class="form-check-input filhoidPai" type="checkbox" id="idOption1">
<label class="form-check-label" for="gridCheck1">
Checkbox exemplo
</label>
</div>
</li>
<li>
<div class="form-check">
<input class="form-check-input filhoidPai pai" type="checkbox" id="idOption2">
<label class="form-check-label" for="gridCheck1">
Checkbox exemplo
</label>
</div>
<ul style="display: inline-block; text-decoration: none; list-style: none;">
<li>
<div class="form-check">
<input class="form-check-input filhoidOption2" type="checkbox" id="idOption2SubOption">
<label class="form-check-label" for="gridCheck1">
Checkbox exemplo
</label>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
Ao meu ver, a função change alteraria o status de todos os checkbox na hierarquia, coisa que não acontece.
Quando o idPai é acionado, automaticamente todos os filhoidPai são acionados também (inclusive o que é filho e pai). Da mesma forma que quando o idOption2 é acionado, todos os filhoidOption2 também são. O problema é que quando idPai for selecionado, eu queria que eles acionasse tanto os filhos quanto os filhos dos filhos, tornando-a, uma função recursiva.
Alguma ideia de como fazer isso?