将一组复选框标记链接到相应的一组<select>标记可以通过以下步骤实现:
以下是一个示例代码片段,演示如何将一组复选框标记链接到相应的一组<select>标记:
<!DOCTYPE html>
<html>
<head>
<title>Linking Checkboxes to Select</title>
</head>
<body>
<h3>Checkboxes:</h3>
<input type="checkbox" id="checkbox1" value="Option 1"> Option 1<br>
<input type="checkbox" id="checkbox2" value="Option 2"> Option 2<br>
<input type="checkbox" id="checkbox3" value="Option 3"> Option 3<br>
<h3>Linked Select:</h3>
<select id="linkedSelect">
<option value="">Select an option</option>
</select>
<script>
// Get references to the checkboxes and select
var checkbox1 = document.getElementById("checkbox1");
var checkbox2 = document.getElementById("checkbox2");
var checkbox3 = document.getElementById("checkbox3");
var linkedSelect = document.getElementById("linkedSelect");
// Add event listeners to the checkboxes
checkbox1.addEventListener("change", updateLinkedSelect);
checkbox2.addEventListener("change", updateLinkedSelect);
checkbox3.addEventListener("change", updateLinkedSelect);
// Event handler for checkbox change event
function updateLinkedSelect() {
// Clear existing options
linkedSelect.innerHTML = "";
// Add selected checkboxes to the linked select
if (checkbox1.checked) {
addOption("Option 1", "Value 1");
}
if (checkbox2.checked) {
addOption("Option 2", "Value 2");
}
if (checkbox3.checked) {
addOption("Option 3", "Value 3");
}
}
// Function to add option to the linked select
function addOption(text, value) {
var option = document.createElement("option");
option.text = text;
option.value = value;
linkedSelect.appendChild(option);
}
</script>
</body>
</html>
在上述示例中,我们创建了三个复选框和一个<select>标记。当复选框的状态发生变化时,触发updateLinkedSelect函数。该函数会根据复选框的选中状态,动态添加选项到<select>标记中。每个选项的文本和值都与复选框的文本和值相对应。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云