How to set select all in javascript-JS Tutorial-php.cn

How to set select all in javascript

藏色散人

Release： 2021-06-27 10:30:48

Original

2596 people have browsed it

How to set all-select in javascript: first create an HTML sample file; then add script tags and create js code; finally, loop through each checkbox object and set its checked attribute to true to achieve the select-all function. Can.

How to set select all in javascript

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

How to set select all in javascript?

JavaScript implements select all:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>checkbox的全选和取消全选</title>
<script type="text/javascript">
//页面加载的时候,所有的复选框都是未选中的状态
function checkOrCancelAll(){
//1.获取checkbox的元素对象
var chElt=document.getElementById("chElt");
//2.获取选中状态
var checkedElt=chElt.checked;
//3.若checked=true,将所有的复选框选中,checked=false,将所有的复选框取消
var allCheck=document.getElementsByName("interest");
//4.循环遍历取出每一个复选框中的元素
var mySpan=document.getElementById("mySpan");
if(checkedElt){
//全选
for(var i=0;i<allCheck.length;i++){
//设置复选框的选中状态
allCheck[i].checked=true;
}
mySpan.innerHTML="取消全选";
}else{
//取消全选
for(var i=0;i<allCheck.length;i++){
allCheck[i].checked=false;
}
mySpan.innerHTML="全选";
}
}
</script>
</head>
<body>
<input type="checkbox" id="chElt" οnclick="checkOrCancelAll();"/><span id="mySpan">全选</span><br/>
学习<input type="checkbox" name="interest" value="study"/>
阅读<input type="checkbox" name="interest" value="read"/>
运动<input type="checkbox" name="interest" value="sport"/>
旅行<input type="checkbox" name="interest" value="travel"/>
绘画<input type="checkbox" name="interest" value="draw"/>
音乐<input type="checkbox" name="interest" value="music"/>
</body>
</html>

Copy after login

Checkbox object:

The Checkbox object represents a selection box in an HTML form.

In an HTML document, a Checkbox object is created every time appears.

You can access a select box by iterating over the form's elements[] array, or by using document.getElementById() .

checked property:

checked property sets or returns whether the checkbox should be checked.

Syntax

checkboxObject.checked=true|false

Copy after login

Description

This attribute saves the current state of the checkbox. Whenever this value changes, the onclick event handler will trigger (maybe triggers the onchange event handler).

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to set select all in javascript. For more information, please follow other related articles on the PHP Chinese website!