チェックボックスオンの列にあるすべてのtdのクラスを切り替えます

Question

ソリューションを探しています 選択した各列の上部にチェックボックスがあるテーブルがあります。 1つのチェックボックスをクリックするだけで、 "チェックされた"列のすべての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' \t class='ptaszek'></div> 
 
     </td> 
 
     <td> 
 
      <div><input type='checkbox' name='chkboxarray' \t class='ptaszek'></div> 
 
     </td> 
 
     <td> 
 
      <div><input type='checkbox' name='chkboxarray' \t 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' \t class='ptaszek'></div> 
 
     </td> 
 
     <td> 
 
      <div><input type='checkbox' name='chkboxarray' \t class='ptaszek'></div> 
 
     </td> 
 
     <td> 
 
      <div><input type='checkbox' name='chkboxarray' \t 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 Demo

これはあなたを助けるでしょうか？

ロジック：

チェックチェックボックスがチェックされている場合は、その彼らが選択されている場合は、選択として、関係なく、すべての各要素を割り当て、次にチェックしたり、既に選択されていないと選択されていない、ので、エンドユーザーのためにその逆の場合チェックボックスを使用すると、すべての列を選択/選択解除できるようになります。

$(':checkbox').on('change', function(e) { 
 
    var row = $(this).closest('tr'); 
 
\t 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' \t class='ptaszek'></div></td> 
 
<td><div><input type='checkbox' name='chkboxarray' \t class='ptaszek'></div></td> 
 
<td><div><input type='checkbox' name='chkboxarray' \t 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' \t class='ptaszek'></div></td> 
 
<td><div><input type='checkbox' name='chkboxarray' \t class='ptaszek'></div></td> 
 
<td><div><input type='checkbox' name='chkboxarray' \t 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>