使用jquery进行父/子选择时遇到问题。
我有一个HTML页面,看起来像这样:
<tr>
<input type='checkbox' /> //1st checkbox
<.. some stuff ../>
</tr>
<tr>
<td><input type='checkbox' /></td> //2nd checkbox
<td>
<select id='stateChanger' onchange='stateChanger();'/>
<option> ...</option>
...
</td>
</tr>
我想在我更改它的那一刻检查我用select更改的行的复选框。但是使用下面的代码我只检查第一个复选框。
function stateChanger(){
$('#stateChanger').parent().parent().children('td').children("input[type='checkbox']").attr("checked","true");
}
如果有人有意帮助我,我可以发布完整的代码。 谢谢。维克多
答案 0 :(得分:0)
您可以使用:
function stateChanger(obj) {
$(obj).closest("tr").find("td:first input[type='checkbox']").attr("checked", "true")
}
并将this
添加到onchange='stateChanger();'
,以便onchange='stateChanger(this);'
这将检查第二个<input type='checkbox' />
<强>演示强>
function stateChanger(obj) {
$(obj).closest("tr").find("td:first input[type='checkbox']").attr("checked", "true")
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<input type='checkbox' />
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>
<select id='stateChanger' onchange='stateChanger(this);' />
<option> ...</option>
<option>texst</option>
</td>
</tr>
</table>
答案 1 :(得分:0)
$('#stateChanger').closest('tr').find("td input[type='checkbox']").attr("checked","true");
closest()
找到目标元素的最近父级。
答案 2 :(得分:0)
您可以使用以下
function stateChanger(){
$('#stateChanger').closest('tr').find('td:eq(0)').find('input[type="checkbox"]').prop('checked', true);
}
&#13;
table td{ border:1px solid #999; }
&#13;
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><input type='checkbox' /></td>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>
<select id='stateChanger' onchange='stateChanger();'>
<option value="0">Select Value</option>
<option value="1">Option 1</option>
</select>
</td>
</tr>
</table>
&#13;