Bascule toute la classe de td dans la colonne sur la case cochée

Question

Je cherche une solution, J'ai une table avec des cases à cocher en haut de chaque colonne sélectionnée. Je veux faire un clic sur tous les td dans la colonne "cochée".

violon jusqu'à présent:

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

Il travaille pour un clic individuel td maintenant, je dois faire "en vrac" cliquez sur tous TD par chèque de case à cocher;)

Quelqu'un at-il des idées? Merci pour vos réponses!

Answer 1

Mise à jour:

Sur la base des commentaires de mise à jour de réponse.

JSFiddle Demo

Est-ce que cela vous aide?

Logic:

Vérifiez si la case est cochée, si son vérifié puis attribuer tous les éléments respectifs sélectionnés, peu importe si elles sont sélectionnées ou non sélectionnées déjà et vice-versa pour les non sélectionnés, ainsi l'utilisateur final sera en mesure de sélectionner/désélectionner toutes les colonnes s'il utilise la case à cocher!

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