jeudi 7 septembre 2017

Toggle all td's class in column on checkbox checked

I'm looking for solution, I have table with checkboxes at the top of each selected columns. I want to make click all td's in "checked" column by one checkbox click.

fiddle so far:

$(':checkbox').on('change', function(e) {
  var row = $(this).closest('tr');
        var hmc = row.find(':checkbox:checked').length;
  row.find('td.counter').text(hmc);
});

$("td.zero").on("click", function () {
 if ( $( this ).hasClass( "zero2" ) ) {
 $(this).removeClass("zero2");
var row3 = $(this).closest('tr');
var wal4 = $(this).text();
var wal5 = $(this).closest('tr').children('td.counter2').text();
wal6 = parseFloat(wal5, 10) - parseFloat(wal4, 10);
row3.find('td.counter2').text(wal6.toFixed(2));


      } else {

$(this).addClass("zero2");

var row2 = $(this).closest('tr');
var wal = $(this).text();
var wal2 = $(this).closest('tr').children('td.counter2').text();
wal3 = parseFloat(wal, 10) + parseFloat(wal2, 10);
row2.find('td.counter2').text(wal3.toFixed(2));

}
      
      });
      
$(':checkbox.taker').on('change', function(e) {
  alert ("tds in column clicked");
  });
    
td
{
  text-align: center;
  padding: 8px 8px 8px 8px;
  cursor: default;
}
input.ptaszek {
  transform: scale(2);
}

td.zero2{
  background-color: red;
}
<script src="http://ift.tt/1oMJErh"></script>
<table>
<thead>
<tr>
<th>X</th><th>X</th><th>X</th>
<th>Count1</th><th>Count2</th><th>Count3</th>
<th>Val1</th><th>Val2</th><th>Val3</th><th>Val4</th><th>Val5</th>
</tr>
</thead>

<tbody>
<tr><td></td><td></td><td></td><td></td><td></td><td></td>
<td><input type='checkbox' class='taker'></td>
<td><input type='checkbox' class='taker'></td>
<td><input type='checkbox' class='taker'></td>
<td><input type='checkbox' class='taker'></td>
<td><input type='checkbox' class='taker'></td>
</tr>
<tr>
<td><div><input type='checkbox' name='chkboxarray'       class='ptaszek'></div></td>
<td><div><input type='checkbox' name='chkboxarray'       class='ptaszek'></div></td>
<td><div><input type='checkbox' name='chkboxarray'       class='ptaszek'></div></td>
<td class='counter'>0</td><td class='counter2'>0</td><td class='counter3'>0</td>
<td class='zero'>0.5</td><td class='zero'>5</td><td class='zero'>2.1</td><td class='zero'>0.2</td><td class='zero'>1.7</td>
</tr>
<tr>
<td><div><input type='checkbox' name='chkboxarray'       class='ptaszek'></div></td>
<td><div><input type='checkbox' name='chkboxarray'       class='ptaszek'></div></td>
<td><div><input type='checkbox' name='chkboxarray'       class='ptaszek'></div></td>
<td class='counter'>0</td><td class='counter2'>0</td><td class='counter3'>0</td>
<td class='zero'>1.4</td><td class='zero'>0.5</td><td class='zero'>2</td><td class='zero'>1.1</td><td class='zero'>1.5</td>
</tr>
</tbody>
</table>

It's working for individual td click now, I need to make "bulk" click all td's by checkbox check ;)

Anyone have ideas? Thanks for your replies!




Aucun commentaire:

Enregistrer un commentaire