Home >Web Front-end >JS Tutorial >How to set select all in javascript

How to set select all in javascript

藏色散人
藏色散人Original
2021-06-27 10:30:222662browse

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>

Checkbox object:

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

In an HTML document, a Checkbox object is created every time 2213c9627c391f00ef101b1592023bcb 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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn