Question

目标的方向＆gt;
只使用一个具有asdf类的复选框，通过将背景颜色更改为黄色来启用该复选框以选择行。复选框的剩余部分（右侧）不能将背景颜色更改为黄色在简短的摘要中，第二个和第三个复选框不应该执行任何操作。

障碍＆GT;

我面临的问题是不知道如何解决它。

如果可能的话，不要改变html的结构，因为它现在在生产阶段使用。

谢谢！

＆＃13;

$("#candy input[type=checkbox]").on("change", function () {
    if (this.checked) {
        $(this).parents('tr').addClass('selected');
        $('#dd').removeClass('selected');
    } else {
        $('#bbbbbb').prop('checked', false);
        $(this).parents('tr').removeClass('selected');
        $('#dd').removeClass('selected');
    }
});


$('#bbbbbb').click(function () {
    var checked = $("#bbbbbb").is(':checked');
    $(".asdf").each(function () {
        $(this).prop('checked', checked);
        if (checked) {
            $(this).parents('tr').addClass('selected');
            $('#dd').removeClass('selected');
        }
        else {
            $(this).parents('tr').removeClass('selected');
            $('#dd').removeClass('selected');
        }
    });
});

＆＃13;

tr.selected {
    background-color: #FEF0BF;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<table id="candy" >
	<tr id="dd">
		<th><input type="checkbox" id="bbbbbb" /></th>
		<th width="20">a</th>
		<th width="20">b</th>
		<th width="20">c</th>
		<th width="20"">d</th>
		<th width="20">e</th>
		<th width="20">f</th>
		<th width="20">g</th>
		<th width="20">h</th>
	</tr>
	<tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td>v</td>
		<td><input type="checkbox" /></td>
		<td><input type="checkbox" /></td>                                 
	</tr>
	<tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td>e</td>
		<td><input type="checkbox" /></td>
		<td><input type="checkbox" /></td>                                  
	</tr>
    <tr>
		<td><input type="checkbox" class="asdf"  /></td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td>q</td>
		<td><input type="checkbox" /></td>
		<td><input type="checkbox" /></td>                                  
	</tr>
</table>

＆＃13;

Answer 1

对于您的选择器，只需选择第一个文本框的特定类，而不是像这样的所有文本框

$('#candy .asdf').on('change' function(){
     //your code
 });

Answer 2

要加强@Binvention的答案，您可以使用退出选择器并添加该类。如果类asdf也用于其他元素而不仅仅是输入

，这将非常有用

$("#candy input[type=checkbox].asdf").on("change", function () {
    ...
});

此外，如果该类不存在，那么您可以使用以下每个列的第一个行中选择 first 复选框

$("#candy tr > td:first-of-type > input[type=checkbox]:first-of-type").on("change", function () {
    ...
});

虽然我怀疑这会更有效率，然后直接定位该类，并且如果复选框的位置发生变化，那么此选择器将会中断。如果你有，我建议你使用这个课程。

Answer 3

如果我理解你，那就行了。您只选择类'asdf'的复选框，并更改该复选框所在行的背景颜色。该行中的其他两个复选框不执行任何操作。

$('.asdf').on('change', function(){
    if($(this).attr("checked") == 'checked')
        $(this).parent().parent().css('backgroundColor', '#ff0');
    else
        $(this).parent().parent().css('background', 'none');
});

指定一个复选框以生成选定的行

3 个答案: