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

Question

下面是我的 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>

Answer 1

试试这个:

$('.chk').on('click', function(e){

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

Fiddle here