這篇文章主要介紹JS實現的全選、全不選及反選功能【，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。
具體如下：
效果圖如下:點擊全選時會全部選中;全不選時全部不選;反選時反向選中.
html結構代碼:
<input class = 'check' type="checkbox" > <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input id="checkAll" type="button" value="全選"> <input id="unCheckAll" type="button" value="全不"> <input id="reverseCheck" type="button" value="反選">
javascript代碼如下:
<script>
/*一：需求分析：
(1)點擊全選：選中所有選擇框（設置checked屬性為true）
(2)點擊全不選：不選中所有選擇框（設置checked屬性為false）
(3)點擊反選：讓每一個選擇框的checked屬性與自身相反
二：思路分析
1.獲取元素
2.注冊事件
3.事件處理
*/
//1.獲取頁面元素
var checkAll = document.getElementById('checkAll');//全選
var unCheckAll = document.getElementById('unCheckAll');//全不選
var reverseCheck = document.getElementById('reverseCheck');//反選
var checkList = document.getElementsByClassName('check');//選擇框列表
//2.注冊事件
//2.1 全選
checkAll.onclick = function(){
//3.事件處理：選中所有選擇框（設置checked屬性為true）
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = true;
}
}
//2.2 全不選
unCheckAll.onclick = function(){
//3.事件處理:不選中所有選擇框（設置checked屬性為false）
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = false;
}
}
//2.3 反選
reverseCheck.onclick = function(){
//3.事件處理:讓每一個選擇框的checked屬性與自身相反
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = !checkList[i].checked;//邏輯非取反
// if (checkList[i].checked == true){
// checkList[i].checked = false;
// }else{//false
// checkList[i].checked = true;
// }
}
}
</script>完整示例代碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.jb51.net JS全選、全不選、反選</title>
</head>
<body>
<input class = 'check' type="checkbox" >
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input class = 'check' type="checkbox">
<input id="checkAll" type="button" value="全選">
<input id="unCheckAll" type="button" value="全不">
<input id="reverseCheck" type="button" value="反選">
<script>
/*一：需求分析：
(1)點擊全選：選中所有選擇框（設置checked屬性為true）
(2)點擊全不選：不選中所有選擇框（設置checked屬性為false）
(3)點擊反選：讓每一個選擇框的checked屬性與自身相反
二：思路分析
1.獲取元素
2.注冊事件
3.事件處理
*/
//1.獲取頁面元素
var checkAll = document.getElementById('checkAll');//全選
var unCheckAll = document.getElementById('unCheckAll');//全不選
var reverseCheck = document.getElementById('reverseCheck');//反選
var checkList = document.getElementsByClassName('check');//選擇框列表
//2.注冊事件
//2.1 全選
checkAll.onclick = function(){
//3.事件處理：選中所有選擇框（設置checked屬性為true）
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = true;
}
}
//2.2 全不選
unCheckAll.onclick = function(){
//3.事件處理:不選中所有選擇框（設置checked屬性為false）
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = false;
}
}
//2.3 反選
reverseCheck.onclick = function(){
//3.事件處理:讓每一個選擇框的checked屬性與自身相反
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = !checkList[i].checked;//邏輯非取反
// if (checkList[i].checked == true){
// checkList[i].checked = false;
// }else{//false
// checkList[i].checked = true;
// }
}
}
</script>
</body>
</html>以上是“JS實現的全選、全不選及反選功能【”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
