Checkar all daughter class radiobuttons checkbox

Question

Checkar all daughter class radiobuttons checkbox

Asked 6 years, 5 months ago

Viewed 91 times

0

I have a page that will display a Checklist, the data displayed is coming from the database. I need that when the user clicks on the first checkbox (id="selectTdsA", for example) it selects all the radios corresponding to the value A, as well as the corresponding checkbox. That I managed to do.

My problem is that each header (example Facade) has 4 checkbox, their function is to mark only the radios "children" of this header, IE, when you click the checkbox, it will mark only the radios connected to them, currently the code marks all of the class "column1"Because I couldn’t define a selector that would give me that. Follows the code:

<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>

1 answer

Browser other questions tagged javascript jquery checkbox radiobutton

You are not signed in. Login or sign up in order to post.

by Renato Diniz • **761** points · Answer 1 · 2018-06-11T15:24:34+00:00

Use the Jquery date attribute. With it you can add more information to your elements, in addition to the already used id’s and classes. You can, for example, put a "data-item" attribute (always have to be date-{identifier}) in the checkboxes of each header, identified them with the numbers or the way you want. There on the radios you also put date attributes, for when selecting which should be marked, you can compare the attribute of the checkbox with those of the radios. It would look something like this:

$(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>