检查常见的下拉项（JavaScript，jQuery）

Question

我是编码的初学者，下面的代码需要一些帮助。

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

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

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

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

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

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

$("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)
}

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)

然后根据您的要求更改我们的名称。