Изменение фонового цвета td при проверке

Question

Как это сделать? У меня есть checkbox, который, когда вы нажимаете/проверяете полную колонку td, будет иметь цвет фона. Затем, если он не установлен, он удалит свой фоновый цвет. Также, если он уже проверен, и пользователь проверил еще один checkbox, тот, который был отмечен, будет иметь фоновый цвет, а предыдущий цвет не будет иметь цвета фона.

jsfiddle

Answer 1

Вы должны просто добавить Col тегов в HTML-таблицу. Затем вы можете установить цвет фона в седловине и будет делать все TDs в столбце, цвет:

function ChangeColColor(chkCol,col) { 
 
    var varCol = document.getElementById(col); 
 
    var varColor = "White"; 
 
    if (chkCol.checked == true) { 
 
     varColor = "Red"; 
 
    } 
 
    varCol.style.backgroundColor = varColor; 
 
}

<table> 
 
    <colgroup> 
 
    <col id="colA"> 
 
     <col id="colB"> 
 
     <col id="colC"> 
 
    </colgroup> 
 
    <tr> 
 
    <td>Column A <input id="chkColA" type="checkbox" onclick="ChangeColColor(this,'colA')"/></td> 
 
    <td>Column B <input id="chkColB" type="checkbox" onclick="ChangeColColor(this,'colB')"/></td> 
 
    <td>Column C <input id="chkColC" type="checkbox" onclick="ChangeColColor(this,'colC')"/></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Data A:1</td> 
 
    <td>Data B:1</td> 
 
    <td>Data C:1</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Data A:2</td> 
 
    <td>Data B:2</td> 
 
    <td>Data C:2</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Data A:3</td> 
 
    <td>Data B:3</td> 
 
    <td>Data C:3</td> 
 
    </tr> 
 
</table>

Answer 2

попробовать что-то вроде ниже

$('input:checkbox').click(function() { 
 
    $(this).parent().addClass('green') 
 
    $('input:checkbox').not(this).prop('checked', false).parent().removeClass('green'); 
 
});

.green { 
 
    background-color: green; 
 
    width: 50px; 
 
    height: 50px; 
 
    padding: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table width="200" border="1"> 
 
    <tbody> 
 
    
 
    <tr> 
 
     <td><input type="checkbox" /></td> 
 
     <td><input type="checkbox" /></td> 
 
     <td><input type="checkbox" /></td> 
 
     <td><input type="checkbox" /></td> 
 
     <td><input type="checkbox" /></td> 
 
    </tr> 
 

 
    </tbody> 
 
</table>