通过javascript控制台打钩复选框标签名

Question

我想通过javascript复选框。

事情是我有一个任务来检查更多的300个复选框与特定的名称。

我可以检查一个框，或检查所有框......但如何检查特定的框？

下面是一个例子：

<li id="s1" class="city-select"> 
    <input name="rid" id="r1" value="1" type="checkbox"> 
    <label for="r1" id="l1">Paris</label> 
</li> 
<li id="s1" class="city-select"> 
    <input name="rid" id="r2" value="2" type="checkbox"> 
    <label for="r2" id="l2">Plovdiv</label> 
</li> 
<li id="s1" class="city-select"> 
    <input name="rid" id="r3" value="3" type="checkbox"> 
    <label for="r3" id="l3">Berlin</label> 
</li> 

我想只打勾“柏林”和“巴黎” - 这里是我用打勾的所有东西：

[].forEach.call(document.querySelectorAll('input[type="checkbox"]'),function(el){el.checked=true}); 

这里我试图键入：

$("lable:contains('paris, berlin')").prev().find('input').addAttr("checked"); 

Answer 1

您有错误的选择器来定位复选框。您需要使用：

$("label:contains(Paris),label:contains(Berlin)").prev().prop("checked",true); 

Working Demo

更新：

var cities = ["Paris","Berlin"]; 
$("label:contains('" + cities.join("'),label:contains('") + "')").prev().prop("checked",true); 

Working Fiddle for update

Answer 2

它看起来像你使用的prev应该是parent或closest。

因此，您采取当前标签，上到容器，然后下到复选框。

如果您使用prev，那么您可以限制您可以更改多少html（例如，如果将来在标签上添加div包装器，则必须更改所有代码）。

给出：

<li id="s1" class="city-select"> 
    <input name="rid" id="r3" value="3" type="checkbox"> 
    <label for="r3" id="l3">Berlin</label> 
</li> 

然后用

$("label:contains(Paris),label:contains(Berlin)") 
    .closest("li") 
    .find(":checkbox") 
    .prop("checked",true); 

更多信息的API文档：https://api.jquery.com/closest/

---

如何使用这300个城市？

这取决于它们是如何存储的。如果是逗号分隔列表（巴黎，柏林），那么先拆分为数组，然后先转换为数组，然后先转换为数组...（请参阅模式？）

var citiesList = "Paris,Berlin".split(","); 

$(citiesList).each(function() { 
    $("label:contains(" + this + ")") 
     .closest("li") 
     .find(":checkbox") 
     .prop("checked",true); 
});