在选中复选框的列中切换所有 td 的类

Question

我正在寻找解决方案， 我的表格在每个选定列的顶部都有复选框。 我想通过单击一个复选框来单击“选中”列中的所有 td。

到目前为止的小提琴：

$(':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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>

它现在适用于单个 td 点击，我需要通过复选框检查“批量”点击所有 td ；）

有人有想法吗？ 谢谢您的回复！

Answer 1

更新：

根据评论更新答案。

JSFiddle 演示

这对你有帮助吗？

逻辑：

检查复选框是否已选中，如果已选中，则将所有相应元素分配为选中状态，无论它们是否已选中或未选中，反之亦然，对于未选中，因此最终用户将能够选择/取消选择所有列，如果他使用了复选框！

$(':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) { 
  var elem = $(this).parent().index(); 
  $('tr').each(function(index){
    var td = $(this).children().eq(elem);
    if(index > 1){
      if($(':checkbox.taker:checked').length > 0){
        td.addClass('zero2');
      }else{
        td.removeClass('zero2');
      }
    }
  });
});

td
{
  text-align: center;
  padding: 8px 8px 8px 8px;
  cursor: default;
}
input.ptaszek {
  transform: scale(2);
}

td.zero2{
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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>