Question

我有一个如下所示的列表：

<ul id="someList">
    <li><input name="myNumber" type="checkbox" value="1" /> One </li>
    <li><input name="myNumber" type="checkbox" value="2" /> Two </li>
    <li><input name="myNumber" type="checkbox" value="3" /> Three </li>
</ul>

我试图使用jQuery查找包含特定文本的li，然后选中相应的复选框。像这样：

        $("#someList").find("Two").prev("input[type=checkbox]").prop("checked", true);

好吧，我无法让它发挥作用。所以经过一些搜索，我找到了一个使用DID工作的filter（）的例子。

     $('li').filter(function(){
             var txt = this.textContent;
             return txt === 'Two';  
         }).find('input[type=checkbox]').prop('checked', true);

这就像一个冠军。唯一的问题是，它似乎比我预期的更复杂。

我的问题很简单。这是完成我想要做的事情的最佳方式吗？

Answer 1

您可以使用:contains()选择器按其内容查找li，然后使用find()获取input

＆＃13;

$(document).ready(function () {
  $("#someList li:contains('Two')").find("input").prop("checked", true);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="someList">
    <li><input name="myNumber" type="checkbox" value="1" /> One </li>
    <li><input name="myNumber" type="checkbox" value="2" /> Two </li>
    <li><input name="myNumber" type="checkbox" value="3" /> Three </li>
</ul>

＆＃13;

Answer 2

另一种解决方案是使用children()获取input checkbox并检查。

$("#someList li:contains('Two')")会获得li元素。
children("input")会在li内找到复选框元素。
prop("checked", true)会检查复选框元素。

＆＃13;

$("#someList li:contains('Two')").children("input").prop("checked", true);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ul id="someList">
	<li><input name="myNumber" type="checkbox" value="1" /> One </li>
	<li><input name="myNumber" type="checkbox" value="2" /> Two </li>
	<li><input name="myNumber" type="checkbox" value="3" /> Three </li>
</ul>

＆＃13;

根据列表项的textcontent检查列表中的复选框

2 个答案: