使用JavaScript选择All按钮
SelectAll button using JavaScript
我有以下代码。我想在点击按钮时选中所有复选框。如何仅使用JavaScript来完成此操作?
<div id="blocked_list_add_website_help_text">
<button type="button" id="blockSelectAll" class="secondary">Select All</button>
</div>
<input type="checkbox" value="box1" />Box1
<input type="checkbox" value="box2" />Box2
<input type="checkbox" value="box3" />Box3
Pure JS:
document.getElementById("blockSelectAll").onclick = function() {
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].type == "checkbox") {
inputs[i].checked = true;
}
}
}
工作小提琴
使用document.querySelectorAll
:
document.getElementById("blockSelectAll").onclick = function(){
var checkboxes = document.querySelectorAll('input[type=checkbox]');
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].checked = true;
}
};
是的,你可以试试这个
HTML
<button type="button" id="blockSelectAll" onclick="checkAll()" class="secondary">Select All</button>
JavaScript
function checkAll() {
var checkboxes = document.getElementsByTagName('input');
for (var i = 0; i < checkboxes.length; i++) {
if (checkboxes[i].type == 'checkbox') {
checkboxes[i].setAttribute('checked', true) // Or inputs[i].checked = true;
}
}
}
Fiddle演示
<script language="JavaScript">
function checker() {
checkboxes = document.getElementsByTagName('input');
for each(var checkbox in checkboxes)
checkbox.checked = true;
}
</script>
<div id="blocked_list_add_website_help_text">
<button type="button" id="blockSelectAll" class="secondary" onclick=checker() >Select All</button>
</div>
<input type="checkbox" value="box1" />Box1
<input type="checkbox" value="box2" />Box2
<input type="checkbox" value="box3" />Box3
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 正在添加'X'按钮,在文本字段旁边使用javascript
- 多个单选按钮组相互干扰
- JavaScript下拉菜单-点击按钮并根据所选值重定向到url
- Javascript按钮下拉列表
- jquery试图按名称获取按钮位置
- 漂亮照片图片库中的Facebook赞按钮
- 扩展移相器按钮类不工作
- 通过单击表单中的按钮,在代码生成中使用javascript生成字母数字代码
- 单击按钮以等待单击按钮
- 剑道UI内联编辑:如何在点击其他按钮时隐藏按钮
- 单击按钮后如何逐个调用分区,上一个分区将隐藏
- 如何从querySelectorAll中获取按钮类型
- 如何在输入字段中的按钮的帮助下打开日历,该字段的类型为“=”;日期”;
- 按下按钮时保存cookie
- imacros:在给定的帧内按ALL(数字不同)按钮
- 使用dojo中的select all按钮选择不包括null值的值
- Reset All按钮从JS literal添加一个新的实例jQuery
- 推特引导手风琴toggle-all按钮不能正常工作
- 使用JavaScript选择All按钮