创建一个全选的单选框按钮
时间: 2024-10-11 07:16:51 浏览: 21
angular框架实现全选与单选chekbox的自定义
创建一个全选的单选框按钮通常用于表格或者其他列表的选择场景中,它允许用户一次性选择整个集合,而不是单独选择每个选项。这种功能一般通过JavaScript或者HTML结合CSS来实现,下面是一个简单的HTML示例:
```html
<div id="selectAll">
<input type="checkbox" id="selectAllCheckbox" onclick="toggleAll(this)">
<label for="selectAllCheckbox">全选</label>
</div>
<input type="radio" name="choice" value="option1"> 选项1
<input type="radio" name="choice" value="option2"> 选项2
<!-- 添加更多的单选框... -->
<script>
function toggleAll(checkbox) {
var inputs = document.getElementsByName('choice');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = checkbox.checked;
}
}
</script>
```
在这个例子中,当用户点击“全选”复选框时,`toggleAll`函数会遍历所有同名的单选框,并将它们的`checked`属性设置为当前全选框的状态。
阅读全文