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

时间：2017-09-07 13:45:51

标签： jquery checkbox toggle

我正在寻找解决方案， 我在每个选定列的顶部都有一个带复选框的表。 我想通过一次复选框点击“选中”栏中的所有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;）

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

1 个答案:

答案 0 :(得分：0)

<强>更新

根据评论更新答案。

JSFiddle Demo

这对你有帮助吗？

<强>逻辑：

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

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

相关问题
最新问题