0

Eu tenho uma página que exibirá um checklist, os dados exibidos são provenientes do banco. Preciso que quando o usuário clicar no primeiro checkbox (id="selecionaTdsA", por exemplo) ele selecione todos os radios que correspondentes ao valor A, bem como os checkbox correspondentes. Isso eu consegui fazer.

Meu problema é que cada cabeçalho(exemplo Fachada) tem 4 checkbox, a função deles é marcar apenas os radios "filhos" deste cabeçalho, ou seja, quando clicar no checkbox, ele irá marcar apenas os radios ligados a eles, atualmente o código marca todos da classe "coluna1", pois não consegui definir um seletor que me proporcionasse isso. Segue o código:

<html>
<head>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="bootstrap.min.css">

    <style>
        table, table tr, table td{
            border: 1px solid black;
        }    
        
        td{
            width: 90px;    
        }    
        
        div.divInline{
            display: inline-block;
            margin-left: 30px;
        }
    </style>
</head>
<body>
<?php global $x; ?>
<div>
    <input type="checkbox" class="selecionarTdsA" id="selecionaTdsA">Selecionar todas a
    <input type="checkbox" class="selecionarTdsB" id="selecionarTdsB">Selecionar todas b
    <input type="checkbox" class="selecionarTdsC" id="selecionarTdsC">Selecionar todas c
    <input type="checkbox" class="selecionarTdsD" id="selecionarTdsD">Selecionar todas d
</div>

<?php $meuCabecalho = ['Fachada', 'Calçada', 'Telhado', 'Equipamentos']; ?>

<?php for($q = 0; $q < 4; $q++){ ?>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $q ?>">
            <?php echo $meuCabecalho[$q] ?>
        </a>    
        <div class="divInline">
            <input type="checkbox" class="<?php echo $meuCabecalho[$q] ?>1" id="selecionarCols1" value="check1">Selecionar a
            <input type="checkbox" class="<?php echo $meuCabecalho[$q] ?>2" id="selecionarCols2" value="check2">Selecionar b
            <input type="checkbox" class="<?php echo $meuCabecalho[$q] ?>3" id="selecionarCols3" value="check3">Selecionar c
            <input type="checkbox" class="<?php echo $meuCabecalho[$q] ?>4" id="selecionarCols4" value="check4">Selecionar d
        </div>
      </h4>
    </div>
    <div id="collapse<?php echo $q ?>" class="panel-collapse collapse">
      <div class="panel-body">
        <table>
            <tbody>
            
             <?php for($a = 0; $a <5; $a++){ ?>
                <tr>
                    <td>Subitem <?php echo $a ?></td>
                    <td><input type="radio" name="subcabecalho<?php echo $x ?>" value="a" class="coluna1">a</td>
                    <td><input type="radio" name="subcabecalho<?php echo $x ?>" value="b" class="coluna2">b</td>
                    <td><input type="radio" name="subcabecalho<?php echo $x ?>" value="c" class="coluna3">c</td>
                    <td><input type="radio" name="subcabecalho<?php echo $x ?>" value="d" class="coluna4">d</td>            
                </tr>
                
             <?php  $x++; ?>    
             <?php } ?>    
            </tbody>
            
            <tr>
        
            </tr>
        </table>
      </div>
    </div>
  </div>
  <?php } ?>    
</div>
    
<script src="jquery.min.js"></script>    
    
<script src="bootstrap.min.js"></script>

<script>

$(document).ready(function() {
    $('input:checkbox[id="selecionaTdsA"]').click(function() {
        if($("input[id='selecionaTdsA']").is(':checked')) {
        
            $(".coluna1").each(function () {
                $(this).prop("checked", true);
            });        
            
            $('input:checkbox[id=selecionarCols1]').prop('checked', true);
            
        }else{
            $("input[class='coluna1']").each(function () {
                $(this).prop('checked', false);
            });    
            
            $('input:checkbox[id=selecionarCols1]').prop('checked', false);
        }
    });
    
    
    //AQUI TENHO QUE COLOCAR O SELETOR CORRETO
    $('input:checkbox[id="selecionarCols1"]').click(function() {
        $(".coluna1").each(function () {
            $(this).prop("checked", true);
        });        

    });
    
    
    
    
});



</script>

</body>

Isso que eu preciso

1 Resposta 1

1

Use o atributo data do JQuery. Com ele você pode adicionar informações a mais nos seus elementos, além dos já usados id's e classes. Você pode, por exemplo, colocar um atributo "data-item" (tem que ser sempre data-{identificador}) nos checkboxes de cada cabeçalho, identificado eles com o números ou da forma que você desejar. Aí nos radios você coloca também atributos data, pra na hora de selecionar quais devem ser marcados, você pode comparar o atributo do checkbox com os dos radios. Ficaria mais ou menos assim:

$(document).ready(function(){
        // Seleciona elementos cuja classe começa com 'subcabecalho-'
		$("[class^='subcabecalho-']").on("change", function(){
			// Pega o atributo data-item do checkbox, pra saber de qual item(cabeçalho) iremos marcar as colunas 
            var item = $(this).data("item");
            // Usamos o valor do checkbox pra saber qual coluna será marcada
			var valor = $(this).val();
        // Seleciona todos os radios com a classe radio-item{numero_do_cabecalho} e que tenham o atributo data = valor concatenado com item, ex: a1, b2, d1... E seta a propriedade "checked" de acordo com o que foi marcado no checkbox
    	$(".radio-item"+item+"[data-item='"+valor+item+"']").prop("checked", $(this).prop("checked"));
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item1">
<h3>
Item 1
</h3>
<input type="checkbox" class="subcabecalho-item1" data-item="1" value="a"> a
<input type="checkbox" class="subcabecalho-item1" data-item="1"  value="b"> b 
<input type="checkbox" class="subcabecalho-item1" data-item="1"  value="c"> c
<input type="checkbox" class="subcabecalho-item1" data-item="1"  value="d"> d

<table>
<tr>
  <td>Subitem 1</td>
  <td><input type="radio" class="radio-item1" data-item="a1" value="a"></td>
  <td><input type="radio" class="radio-item1" data-item="b1"  value="b"></td>
  <td><input type="radio" class="radio-item1" data-item="c1" value="c"></td>
  <td><input type="radio" class="radio-item1" data-item="d1" value="d"></td>
</tr>
<tr>
  <td>Subitem 2</td>
  <td><input type="radio" class="radio-item1" data-item="a1" value="a"></td>
  <td><input type="radio" class="radio-item1" data-item="b1" value="b"></td>
  <td><input type="radio" class="radio-item1" data-item="c1" value="c"></td>
  <td><input type="radio" class="radio-item1" data-item="d1" value="d"></td>
</tr>
<tr>
  <td>Subitem 3</td>
  <td><input type="radio" class="radio-item1" data-item="a1" value="a"></td>
  <td><input type="radio" class="radio-item1" data-item="b1" value="b"></td>
  <td><input type="radio" class="radio-item1" data-item="c1" value="c"></td>
  <td><input type="radio" class="radio-item1" data-item="d1" value="d"></td>
</tr>
</table>
</div>
<div id="item2">
<h3>
Item 2
</h3>
<input type="checkbox" class="subcabecalho-item2" data-item="2" value="a"> a
<input type="checkbox" class="subcabecalho-item2" data-item="2" value="b"> b 
<input type="checkbox" class="subcabecalho-item2" data-item="2" value="c"> c
<input type="checkbox" class="subcabecalho-item2" data-item="2" value="d"> d

<table>
<tr>
  <td>Subitem 1</td>
  <td><input type="radio" class="radio-item2" data-item="a2" value="a"></td>
  <td><input type="radio" class="radio-item2" data-item="b2" value="b"></td>
  <td><input type="radio" class="radio-item2" data-item="c2" value="c"></td>
  <td><input type="radio" class="radio-item2" data-item="d2" value="d"></td>
</tr>
<tr>
  <td>Subitem 2</td>
  <td><input type="radio" class="radio-item2" data-item="a2" value="a"></td>
  <td><input type="radio" class="radio-item2" data-item="b2" value="b"></td>
  <td><input type="radio" class="radio-item2" data-item="c2" value="c"></td>
  <td><input type="radio" class="radio-item2" data-item="d2" value="d"></td>
</tr>
<tr>
  <td>Subitem 3</td>
  <td><input type="radio" class="radio-item2" data-item="a2" value="a"></td>
  <td><input type="radio" class="radio-item2" data-item="b2" value="b"></td>
  <td><input type="radio" class="radio-item2" data-item="c2" value="c"></td>
  <td><input type="radio" class="radio-item2" data-item="d2" value="d"></td>
</tr>
</table>
</div>

1
  • Era isso mesmo! Muito obrigada, Renato.
    – Handrick
    Commented 11/06/2018 às 17:51

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 .