通過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); 
});