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

Answer 2

更新试试这个：

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>

Answer 3

在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

<强> DEMO

我有多个复选框及其值。我想改变颜色

3 个答案: