溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹JS實(shí)現(xiàn)的全選、全不選及反選功能【，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！
1、能夠嵌入動態(tài)文本于HTML頁面。2、對瀏覽器事件做出響應(yīng)。3、讀寫HTML元素。4、在數(shù)據(jù)被提交到服務(wù)器之前驗(yàn)證數(shù)據(jù)。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創(chuàng)建和修改等。7、基于Node.js技術(shù)進(jìn)行服務(wù)器端編程。
具體如下：
效果圖如下:點(diǎn)擊全選時會全部選中;全不選時全部不選;反選時反向選中.
html結(jié)構(gòu)代碼:
<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)點(diǎn)擊全選：選中所有選擇框（設(shè)置checked屬性為true）
(2)點(diǎn)擊全不選：不選中所有選擇框（設(shè)置checked屬性為false）
(3)點(diǎn)擊反選：讓每一個選擇框的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.事件處理：選中所有選擇框（設(shè)置checked屬性為true）
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = true;
}
}
//2.2 全不選
unCheckAll.onclick = function(){
//3.事件處理:不選中所有選擇框（設(shè)置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)點(diǎn)擊全選：選中所有選擇框（設(shè)置checked屬性為true）
(2)點(diǎn)擊全不選：不選中所有選擇框（設(shè)置checked屬性為false）
(3)點(diǎn)擊反選：讓每一個選擇框的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.事件處理：選中所有選擇框（設(shè)置checked屬性為true）
for(var i = 0;i<checkList.length;i++){
checkList[i].checked = true;
}
}
//2.2 全不選
unCheckAll.onclick = function(){
//3.事件處理:不選中所有選擇框（設(shè)置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實(shí)現(xiàn)的全選、全不選及反選功能【”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼