在JavaScript中实现复选框的多选功能,主要涉及到HTML、CSS和JavaScript的基本知识。以下是实现复选框多选的基础概念、优势、类型、应用场景以及具体的实现方法。
复选框(Checkbox)是一种允许用户在一组选项中进行多选的输入控件。每个复选框都是一个独立的选项,用户可以通过点击来选择或取消选择。
<fieldset>
和<legend>
标签进行分组,提高可读性。以下是一个简单的示例,展示如何使用JavaScript实现复选框的多选功能,并显示选中的选项。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkbox Multiple Selection</title>
</head>
<body>
<form id="myForm">
<label><input type="checkbox" name="hobby" value="reading"> Reading</label>
<label><input type="checkbox" name="hobby" value="traveling"> Traveling</label>
<label><input type="checkbox" name="hobby" value="sports"> Sports</label>
<button type="button" onclick="showSelected()">Show Selected</button>
</form>
<div id="selectedOptions"></div>
<script src="script.js"></script>
</body>
</html>
function showSelected() {
const checkboxes = document.querySelectorAll('input[name="hobby"]:checked');
const selectedOptions = Array.from(checkboxes).map(cb => cb.value);
document.getElementById('selectedOptions').innerText = 'Selected: ' + selectedOptions.join(', ');
}
name
属性都设置为hobby
,表示它们属于同一组。showSelected
函数。<div>
元素,用于显示选中的选项。showSelected
函数通过querySelectorAll
选择所有被选中的复选框。Array.from
将NodeList转换为数组,并使用map
方法提取每个复选框的value
属性。name
属性相同,以便它们属于同一组。showSelected
函数正确获取并处理选中的复选框。通过以上方法,你可以轻松实现复选框的多选功能,并根据需要进行扩展和定制。
没有搜到相关的文章