javascript - 指定一个 Checkbox 来创建选定的行

Question

目标的方向
仅使用一个具有应启用类 asdf 的复选框，通过将背景颜色更改为黄色来选择行。复选框的其余部分(右侧)不得将背景颜色更改为黄色。
简而言之，第二个和第三个复选框不应执行任何操作。

障碍物>

The problem that I'm facing is that don't know how to solve it.

如果可能，不要更改 html 的结构，因为它目前在生产阶段使用。

http://jsfiddle.net/oc1n1c49/2/

谢谢!

$("#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');
        }
    });
});

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

<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>

Answer 1

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

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