0

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?

1 Resposta 1

2

Há algumas formas:

  • Adicionar a classe idPai nos netos. Ex: class="form-check-input filhoidOption2 idPai"; ou
  • Usar uma classe com o nome que possua todos os níveis.

    Ex: class="pai", class="filho-1", class="filho-2", class="filho-1-1" (neto)

  • Percorrer todos os input:checkbox com a função .find

Optei fazer um exemplo usando este método. Para isso, usei a função .parents() para retornar ao elemento pai .form-check e, logo após, utilizei o método next para ele pegar o elemento ul irmão.

Como a estrutura é sempre (div.form-check > input:check) + ul, vai funcionar corretamente. Com isso, podemos usar o método .find() para buscar os input:checkbox daquele pai específico.

Exemplo:

$(".pai").on("change", function(e) {
  var filhos = $(this)
    .parents('.form-check') /** Seleciona o elemento pai `.form-check` */
    .next('ul') /** Busca o elemento `ul` irmão do pai */
    .find('input:checkbox') /** Seleciona todos os `input` do tipo `checkbox` */
  
  var isChecked = $(this).prop('checked');

  $(filhos).each(function(e) {
    $(this).prop("checked", isChecked);
  })
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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 (Pai)
            </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 (Filho)
                    </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 (Pai e Filho)
                    </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 (Neto e Filho)
                            </label>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

3
  • Esse procedimento funciona se eu criar uma nova hieraquia de checkbox? (ou seja, o próximo pai interfirirá nos filhos do outro pai?) Commented 4/10/2019 às 11:39
  • E eu sei que isso não é mais pertinente a minha pergunta, mas tem como desmarcar o pai ao ter todos os filhos desmarcados? E se sim, há alguma forma de ao marcar um filho, ele encontre o pai e o marque também? Commented 4/10/2019 às 11:41
  • 1
    @WalterFelipe Funciona com diversos níveis de hierarquia, desde que tenham a mesma estrutura (expliquei-a no 3º parágrafo). Também é possível marcar o pai ao marcar o filho e vice-versa, mas isso foge da pergunta principal. Recomendo que crie outra com as novas dúvidas. Caso contrário a moderação do site poderá reverter sua pergunta para a original. Commented 4/10/2019 às 15:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .