要从复选框中检索信息,您可以使用JavaScript和HTML。以下是一个简单的示例,说明如何使用JavaScript从复选框中检索信息并将其显示在页面上。
<div>
元素。<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
</head>
<body>
<input type="checkbox" id="myCheckbox" value="Option 1">
<label for="myCheckbox">Option 1</label><br>
<input type="checkbox" id="myCheckbox2" value="Option 2">
<label for="myCheckbox2">Option 2</label><br>
<input type="checkbox" id="myCheckbox3" value="Option 3">
<label for="myCheckbox3">Option 3</label><br>
<button onclick="retrieveCheckboxInfo()">Retrieve Checkbox Info</button>
<div id="result"></div>
<script src="script.js"></script>
</body>
</html>
script.js
的JavaScript文件中编写一个函数,该函数将检查每个复选框的状态并将所选选项添加到结果<div>
元素中。function retrieveCheckboxInfo() {
let resultDiv = document.getElementById("result");
let checkboxes = document.querySelectorAll('input[type="checkbox"]');
let selectedCheckboxes = [];
for (let i = 0; i< checkboxes.length; i++) {
if (checkboxes[i].checked) {
selectedCheckboxes.push(checkboxes[i].value);
}
}
resultDiv.innerHTML = "Selected options: " + selectedCheckboxes.join(", ");
}
现在,当用户选择一个或多个复选框并单击按钮时,所选选项将显示在页面上的<div>
元素中。
这只是一个简单的示例,您可以根据需要修改和扩展它。
企业创新在线学堂
企业创新在线学堂
云+社区技术沙龙[第17期]
Elastic 中国开发者大会
《民航智见》线上会议
发现科技+教育新范式 2023第一期
云上直播间
领取专属 10元无门槛券
手把手带您无忧上云