How to check / uncheck checkboxes by column using JQuery

Question

How to check / uncheck checkboxes by column using JQuery

Navigation

#1 by (2 votes)
#2 by (0 votes)

3

Here in the company we are doing a plant management. The apartments / units that have the same end (eg Apt 1, Apt 11, Apt 21) and so on, are one underneath the other in the construction and for that reason the plant attached to them is the same, but if a client ask for customization on your unit, the other's default layout needs to be the same as for customization. We could only use a UPDATE in the table but I'm doing as I was asked and as we have been asked by the builders even because it might be that the customization is done only on the unit bought by the client and according to what he requested but if the company to decide to change all plants so that the pattern is the same as the custom one, we need to select all of that column to link to. Each building contains a different amount of units per floor, some contains 4, another 5, and so on, so the amount of columns returned in the table may vary. At the moment, we are only using a function to select all units or no unit but I wanted to know how can you modify my function to select or deselect the units of only one column.

The function is

<script>
    function marcardesmarcar(status){
     $(".chk").each(
            function(){
              if ($(".chk").prop("checked")) 
              $(this).prop("checked", status);
              else $(this).prop("checked", status);               
            }
       );
    }

           </script>'

And the method for showing the checkboxes for each drive is

while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
        if ($nome_torre_old != $row['nome_torre'] OR 
            $nome_bloco_old != $row['nome_bloco'] OR
            $andar_old      != $row['andar']) {
            echo '</tr><tr>';
            $nome_torre_old = $row['nome_torre'];
            $nome_bloco_old = $row['nome_bloco'];
            $andar_old      = $row['andar'];
        }
        echo '<td>      
            <input class="chk" style="margin-left:20px;" type="checkbox" id="p'.$row['id'].'" name="p'.$row['id'].'" ';
        if ($row['plt_uni_in_id_unidade']== $row['id'] AND $row['plt_uni_in_id_planta'] == $id_work) echo 'checked="checked"';
        echo ' />'.$row['nome_torre'].' '.$row['nome_bloco'].' '.$row['nome_apto'].'</td>';
    }

Here the image of how it is, in this case, the building has 4 units per floor and shows 4 columns.

So I wanted to know if there is any way to enter the option to mark / unmark in the header of each column, to be able to check / unselect the options that are in it. In the ways I thought, I need to know in advance how many columns will appear in the table but as I said, each building has a different amount of units per floor so the number of columns will vary. Sorry for the big question but I wanted to explain some things to avoid answers that will not serve me.

php mysql jquery checkbox

asked by anonymous 14.10.2015 / 19:43

2 answers

How to solve vertical centralization bug in Firefox? Error passing values to @Html.DropDownList

score 2 · Answer 1

Would that be?

$(function(){
    $("table tr").each(function(){
        $(this).find("td").eq(<aqui passa o indice da coluna>).find("input").attr("checked", "checked");
    }); 
});

$(function(){
    $("table tr").each(function(){
        $(this).find("td").eq(1).find("input").attr("checked", "checked");
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><table><tr><td>Coluna1</td><td>Coluna2</td><td>Coluna3</td></tr><tr><td><inputtype="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
  </tr>
  <tr>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
    <td>
      <input type="checkbox">
    </td>
  </tr>
</table>

score 0 · Answer 2

There are several possible solutions. Here's one of them using the data you left in the code

<?php
$cols = 4; // Quantidade de unidades por bloco ou por andar

$rows = array();
// Gerando dados ficticios
$id = 1;
for ( $andar = 1; $andar < 6; $andar++) { // Torre Norte
    for ( $unidade = ($andar * 100) + 1; $unidade < ($andar * 100) + 5; $unidade ++) {
        $rows[] = array('id' => $id++, 'nome_torre' => 'Torre Norte', 'nome_bloco' => '', 'nome_apto' => 'Apto ' . $unidade, 'andar' => $andar);        
    }
}
for ( $andar = 1; $andar < 6; $andar++) { // Torre Sul
    for ( $unidade = ($andar * 100) + 1; $unidade < ($andar * 100) + 5; $unidade ++) {
        $rows[] = array('id' => $id++, 'nome_torre' => 'Torre Sul', 'nome_bloco' => '', 'nome_apto' => 'Apto ' . $unidade, 'andar' => $andar);      
    }
}

echo '<table><tr>';
for ($i = 0; $i < $cols; $i++ ) {
    echo sprintf('<th><input type="checkbox" id="col%d" onclick="toogleUnidades(\'col%1$d\');"/>Selecionar Unidades Final %d</th>', $i, $i+1);
}
echo '<tr></tr>';
// O código abaixo só existe no exemplo
// Remover - Inicio 
$row = reset($rows);
            $nome_torre_old = $row['nome_torre'];
            $nome_bloco_old = $row['nome_bloco'];
            $andar_old      = $row['andar'];
// Remover - Fim

// A linha abaixo no código final será for ($i = 1; $row = mysql_fetch_assoc($result); $i++ ) {    
for ($i = 0; $row = array_shift($rows); $i++ ) {
        if ($nome_torre_old != $row['nome_torre'] OR 
            $nome_bloco_old != $row['nome_bloco'] OR
            $andar_old      != $row['andar']) {
            echo '</tr><tr>';
            $nome_torre_old = $row['nome_torre'];
            $nome_bloco_old = $row['nome_bloco'];
            $andar_old      = $row['andar'];
        }
        $class = 'col' . ($i % $cols);
        echo sprintf('<td><input class="chk %s" style="margin-left:20px;" type="checkbox" id="p%d" name="p%2$d" %s />%s %s %s</td>', 
            $class, 
            $row['id'], 
//          ($row['plt_uni_in_id_unidade']== $row['id'] AND $row['plt_uni_in_id_planta'] == $id_work ? 'checked="checked"' : ''),
            '',
            $row['nome_torre'],
            $row['nome_bloco'],
            $row['nome_apto']
            );
}
echo '</tr></table>';           
?>
<script type="text/javascript">
    function toogleUnidades(id) {
        var st = $("#" + id).is(":checked");        
        $("." + id).each(function(){
            this.checked = st;
        });
    }

</script>

Explaining some excerpts:

In sprintf I used notations% 2 $ d indicating that it should be replaced by the second argument of the list of replaces as a decimal
In javascript I created a checkbox for the column with an id and added the class with that same id name to the elements of that column, so I can use the selection of all elements with the same class name