我有多个带有复选框及其值的 <td>.我想更改 <td> 的颜色

I have multiple <td> with the checkbox and its values.I want to change colour of <td>

本文关键字：td 颜色 复选框      更新时间：2023-09-26

下面是我的HTML代码，其中包含多个复选框，其中的相应值为<td>。我通过 php 获得了单击复选框的值，这是一种数组格式$res[]。我想使我获得值的复选框消失，并使<td>背景颜色变为红色，复选框的值可见。我在 php 中将复选框的值定为 $res[0][seat]=>4; 和 $res[1][seat]=>1其中 4 和 1 是值。如何使用jQuery来做到这一点？

<table>
    <tr>
        <td>
            <input name="chk" class='chk' type="checkbox" value="1"/>
            <label>1</label>
        </td>
    </tr>
    <tr>
        <td >
            <input name="chk" class='chk' type="checkbox" value="2"/>
            <label>2</label>
        </td>
    </tr>
    <tr>
        <td >
            <input name="chk" class='chk' type="checkbox" value="3"/>
            <label>3</label>
        </td>
    </tr>
    <tr>
        <td >
            <input name="chk" class='chk' type="checkbox" value="4"/>
            <label>4</label>
        </td>
    </tr>
</table>

试试这个：

$('.chk').on('click', function(e){
    e.preventDefault();
    if($(this).is(':checked')) {
        $(this).hide();
        $(this).closest('td').css('background-color','red');
    }
});

在这里摆弄

更新 试试这个：

var arr=[4,1];// array list received from php 
for(i=0;i< arr.length;i++){
$('table tbody tr td input[type=checkbox]').each(function(){
	 if($(this).val()==arr[i]){
		  $(this).hide();
		    $(this).closest('td').css('background-color','red');
	 }else if($(this).is(':visible')){
		 $(this).closest('td').css('background-color','pink');
	 }
	});	
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table><tr><td>
<input name="chk" class='chk' type="checkbox" value="1"/>
<label>1</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="2"/>
<label>2</label>
</td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="3"/>
<label>3</label>
 </td></tr>
<tr><td >
<input name="chk" class='chk' type="checkbox" value="4"/>
<label>4</label>
 </td></tr></table>

在 jquery 中使用 filter（）

var arrayValue = [4, 1];
$(".chk").filter(function () {
    return arrayValue.indexOf(+this.value) != -1  // check arrayvalue is present in check box or not using indexOf
}).closest("td").css('background-color', 'red').find(".chk").hide();   // set background for closest td and hide chk

演示

相关文章：