Question

我想使用jQuery来选择以下HTML代码中的复选框输入（文本上方的复选框＆＃34; MyLabel＆＃34;）：

＆＃13;

var el = $("span:contains('MyLabel')").parent().find('input');
console.log(el);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td class="col-md-1">
  <input type="checkbox" data-bind="checkedValue: $data, checked: $root.myOption" value="[object Object]">
</td>
<td class="col-md-11">
  <span data-bind="text: label">MyLabel</span>
</td>

＆＃13;

但它没有用。

编辑：我实际上不想查看复选框，我只想获得正确的jquery选择器。

Answer 1

使用.prev()：

var el = $("span:contains('MyLabel')").parent().prev().find('input');
console.log(el);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="col-md-1">
	<input type="checkbox" data-bind="checkedValue: $data, checked: $root.myOption" value="[object Object]">
</td>
<td class="col-md-11">
	<span data-bind="text: label">MyLabel</span>
</td>
</tr>
</table>

Answer 2

您需要定位父级的.prev()兄弟，然后使用.find()定位:checkbox selector

 var checkbox = $("span:contains('MyLabel')").parent().prev().find(':checkbox');

以下是检查它的示例;

var checkbox = $("span:contains('MyLabel')").parent().prev().find(':checkbox');
checkbox.prop('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <td class="col-md-1">
    <input type="checkbox" data-bind="checkedValue: $data, checked: $root.myOption" value="[object Object]">
  </td>
  <td class="col-md-11">
    <span data-bind="text: label">MyLabel</span>
  </td>
</table>

Answer 3

您应该更新javascript代码。从父级（）更改为父级（）

$("span:contains('MyLabel')").parents().find('input')

Answer 4

由于您的td个元素肯定位于tr中的table，我添加了这些元素。

然后，您可以使用closest('tr')轻松定位父行，find(':checkbox')选择checkbox：

var el = $("span:contains('MyLabel')").closest('tr').find(':checkbox');
el.prop('checked', true);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td class="col-md-1">
      <input type="checkbox" data-bind="checkedValue: $data, checked: $root.myOption" value="[object Object]">
    </td>
    <td class="col-md-11">
      <span data-bind="text: label">MyLabel</span>
    </td>
  </tr>
</table>

希望它有所帮助。

使用jquery选择输入，具体取决于其他标记

4 个答案: