父子选择，无法访问第一父（jquery）答案

【问题标题】：Parent and child selection, can't access first parent (jquery)父子选择，无法访问第一父（jquery）
【发布时间】：2018-04-25 10:01:07
【问题描述】：

我在使用 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>

我想在我更改它的那一刻检查我用我的选择更改的行的复选框。但是下面的代码我只选中了第一个复选框。

function stateChanger(){

        $('#stateChanger').parent().parent().children('td').children("input[type='checkbox']").attr("checked","true");
}

如果有人有想法可以帮助我，我可以发布完整的代码。谢谢。维克多

【问题讨论】：

尝试stateChanger(this) 然后function stateChanger(obj){$(obj).closest("tr").find("td:first input[type='checkbox']").attr("checked","true")
在修复 HTML 之后，jQuery 行完全按照它应该做的那样做：jsfiddle.net/khrismuc/0svt6k8m（尽管你会想要使用 prop 而不是 attr）

标签： javascript jquery jquery-selectors parent children

【解决方案1】：

你可以使用：

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>

【讨论】：

我只需要删除查找中的冒号并用空格替换它。

【解决方案2】：

$('#stateChanger').closest('tr').find("td input[type='checkbox']").attr("checked","true");

closest() 查找目标元素最近的父元素。

【讨论】：

【解决方案3】：

你可以像下面这样使用

function stateChanger(){
    $('#stateChanger').closest('tr').find('td:eq(0)').find('input[type="checkbox"]').prop('checked', true);
}

table td{ border:1px solid #999; }

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

【讨论】：