检查常见的下拉项(JavaScript，jQuery)

Question

我需要以下代码的帮助。

所以我在示例中有一个类似于以下页面的页面。

到目前为止，我尝试了以下方法。(请检查我的代码和实时示例(

使用我当前选择复选框的方法，我必须像这样为每个选项编写代码。

$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)

有没有更简单的方法可以做到这一点？ 例如，我们可以只选择包含us_, as_, eu部分的每个部分，而无需为每个选项分配唯一值。您能提供的任何帮助将不胜感激。

$("button.select-all").on("click", selectAll);
function selectAll() {
$(".schoolareas").toArray().forEach(function (a, c, b) {
$("#check_" + a.id).prop("checked", !0)
})
}
$("button.unselect-all").on("click", unselectAll);
function unselectAll() {
$(".schoolareas").toArray().forEach(function (a, c, b) {
$("#check_" + a.id).prop("checked", !1)
})
}
$("button.select-us").on("click", selectAmerica);
function selectAmerica() {
unselectAll();
$(".schoolareas").toArray();
$("#check_us, #check_us-1, #check_us-2").prop("checked", !0)
}
$("button.select-eu").on("click", selectEurope);
function selectEurope() {
unselectAll();
$(".schoolareas").toArray();
$("#check_eu, #check_eu-1").prop("checked", !0)
}

$("button.select-as").on("click", selectAsia);
function selectAsia() {
unselectAll();
$(".schoolareas").toArray();
$("#check_as, #check_as-1").prop("checked", !0)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid py-4">
<div class="row text-center">
<div class="col-8 offset-2">
<div class="btn-groups">
<button class="btn btn-primary select-all">Select All</button>
<button class="btn btn-primary unselect-all">Unselect All</button>
<button class="btn btn-primary" id="latencybutton">Count</button>
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Country/Area</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu2">
<button class="dropdown-item select-us" type="button">America</button>
<button class="dropdown-item select-eu" type="button">Europe</button>
<button class="dropdown-item select-as" type="button">Asia</button>
</div>
</div>
</div>
</div>
</div>
<div class="container col-8 offset-2">
<div class="table-responsive  shadow p-3 mb-5 bg-light rounded text-xs-center">
<table id="grid" class="table table-hover">
<thead class="thead-dark">
<tr>
<th data-type="string">?</th>
<th data-type="string">Locations:</th>
<th data-type="number">Scores:</th>
<th data-type="number">Average:</th>
<th class="thmw" data-type="string">Score Status:</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="check_eu" checked />
<label for="check_eu"></label>
</td>
<td>London (EU)</td>
<td class="schoolareas" id="eu"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_eu-1" checked />
<label for="check_eu-1"></label>
</td>
<td>Manchester (EU)</td>
<td class="schoolareas" id="eu-1"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us" checked />
<label for="check_us"></label>
</td>
<td>New York (US)</td>
<td class="schoolareas" id="us"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us-1" checked />
<label for="check_us-1"></label>
</td>
<td>California (US)</td>
<td class="schoolareas" id="us-1"></td>
<td></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_us-2" checked />
<label for="check_us-2"></label>
</td>
<td>Florida (US)</td>
<td class="schoolareas" id="us-2"></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_as" checked />
<label for="check_as"></label>
</td>
<td>Singapore (AS)</td>
<td class="schoolareas" id="as"></td>
<td class="status"></td>
</tr>
<tr>
<td>
<input type="checkbox" id="check_as-1" checked />
<label for="check_as-1"></label>
</td>
<td>China (AS)</td>
<td class="schoolareas" id="as-1"></td>
<td class="status"></td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

当然可以！与其通过元素的 ID(必须是唯一的(访问元素，不如给它们一个公共类，然后通过它来获取它们。

所以元素看起来像这样：

<input type="checkbox" id="check_us-1" checked />
<input type="checkbox" id="check_us-2" checked />

获取一个额外的类道具，如下所示：

<input type="checkbox" id="check_us-1" class="us" checked />
<input type="checkbox" id="check_us-2" class="us" checked />

然后你可以像这样批量更新他们的道具：

$(".us").prop("checked", !0)

Answer 2

在不修改当前 HTML 的情况下，您可以选择类包含字符串的所有元素：

$('checkbox[class^="us"]')

并更改了它们的复选框值，如下所示：

$('checkbox[class^="us"]').prop("checked", !0)

然后用你想要的任何词来改变我们。

Answer 3

有几种方法可以使用JavaScript或jQuery来做到这一点。

您可以使用属性包含选择器来查找 id 与模式匹配的所有元素：

$('[id*="us_"]').prop('checked', true);

这种形式的选择器也适用于JavaScript的原生document.querySelector()方法。

但是，这存在无意中选择恰好与选择器匹配的不相关元素的风险。例如，上面的选择器还将匹配 id 为"status_code"的元素。

更好的方法是@jonny在他的回答中建议的方法。虽然文档中每个元素的 id 属性必须是唯一的，但其他属性(如"class"(则不是唯一的。这允许您将 css 类名分配给一组相关元素，并使用类选择器按该类名选择它们。(同样，此选择器也适用于document.querySelector方法(。

就个人而言，我不喜欢使用 css 类名来选择相关的元素组，因为 css 类用于样式，而不是用于功能。因此，如果您想将函数样式分开，您可以使用的另一种方法是包含如下数据属性：

<input type="checkbox" id="check_us-1" checked data-group="us" />
<input type="checkbox" id="check_us-2" checked data-group="us" />

然后，您可以使用属性选择器选择两个输入：

$('[data-group="us"]').prop('checked', true);