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个城市使用它？

这取决于它们的存储方式。如果它是一个以逗号分隔的列表（巴黎，柏林），那么首先拆分成一个数组，如果它是json，那么首先转换为一个数组......（参见模式？）

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

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

通过javascript控制台按标签

2 个答案: