JS實現(xiàn)的全選、全不選及反選功能【案例】
更新時間：2023年06月12日 19:17:19 作者：庚中
這篇文章主要介紹了JS實現(xiàn)的全選、全不選及反選功能,涉及javascript事件響應(yīng)、元素遍歷與屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下
本文實例講述了JS實現(xià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)點擊全選：選中所有選擇框（設(shè)置checked屬性為true）
(2)點擊全不選：不選中所有選擇框（設(shè)置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.事件處理：選中所有選擇框（設(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>chabaoo.cn 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)點擊全選：選中所有選擇框（設(shè)置checked屬性為true）
(2)點擊全不選：不選中所有選擇框（設(shè)置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.事件處理：選中所有選擇框（設(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>
實例
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 300px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
width: 300px;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微軟雅黑";
color: #fff;
}
td {
font: 14px "微軟雅黑";
}
tbody tr {
background-color: #f0f0f0;
}
tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll"/>
</th>
<th>品牌</th>
<th>價格</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox"/>
</td>
<td>諾基亞</td>
<td>￥3000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>索尼愛立信</td>
<td>￥4500</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>華為</td>
<td>￥5000</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>vivo</td>
<td>￥2700</td>
</tr>
</tbody>
</table>
</div>
<script>
function my$(id) {
return document.getElementById(id);
}
//獲取全選的這個復(fù)選框
var ckAll = my$("j_cbAll");
//獲取tbody中所有的小復(fù)選框
var cks = my$("j_tb").getElementsByTagName("input");
//點擊全選的這個復(fù)選框,獲取他當(dāng)前的狀態(tài),然后設(shè)置tbody中所有復(fù)選框的狀態(tài)
ckAll.onclick = function () {
//console.log(this.checked);
for (var i = 0; i < cks.length; i++) {
cks[i].checked = this.checked;
}
};
//獲取tbody中所有的復(fù)選框,分別注冊點擊事件
for(var i=0;i<cks.length;i++){
cks[i].onclick=function () {
var flag=true;//默認(rèn)都被選中了
//判斷是否所有的復(fù)選框都選中
for(var j=0;j<cks.length;j++){
if(!cks[j].checked){
//沒選中就進(jìn)來了
flag=false;
break;
}
}
//全選的這個復(fù)選框的狀態(tài)就是flag這個變量的值
ckAll.checked=flag;
};
}
</script>
</body>
</html>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼運行效果。
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯誤與調(diào)試技巧總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要介紹了Javascript獲取表單名稱（name）的方法,涉及javascript操作表單的技巧,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了JavaScript實現(xiàn)快速排序的方法,實例分析了javascript快速排序的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
在一般程序設(shè)計語言中，作用域是按塊來劃分的。即“變量定義在哪個塊之內(nèi)，這個塊就是變量的有效范圍”。2010-12-12
在 javascript 中如何快速獲取數(shù)組指定位置的元素
這篇文章主要介紹了在 javascript 中快速獲取數(shù)組指定位置的元素,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
原生JS實現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)
下面小編就為大家?guī)硪黄鶭S實現(xiàn)輪播效果+學(xué)前端的感受(防止走火入魔)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
javascript 小數(shù)取整簡單實現(xiàn)方式
這篇文章主要介紹了javascript 小數(shù)取整d的簡單實現(xiàn)方式,需要的朋友可以參考下2014-05-05
JS實現(xiàn)textarea通過換行或者回車把多行數(shù)字分割成數(shù)組并且去掉數(shù)組中空的值
這篇文章主要介紹了JS實現(xiàn)textarea通過換行或者回車把多行數(shù)字分割成數(shù)組并且去掉數(shù)組中空的值的相關(guān)資料,需要的朋友可以參考下2018-10-10
微信小程序?qū)崿F(xiàn)歷史搜索功能的全過程(h5同理)
最近在使用微信小程序開發(fā)的時候遇到了一個需求,需要實現(xiàn)歷史搜索記錄的功能,所以下面這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)歷史搜索功能(h5同理)的相關(guān)資料,需要的朋友可以參考下2022-12-12
實現(xiàn)png圖片和png背景透明（支持多瀏覽器）的方法
Firefox和Opera對PNG的支持非常的好，都是IE卻無視PNG圖片這一特性的“存在”，雖然IE7已經(jīng)支持都是IE6還是不行。2009-09-09
JavaScript簡單獲取系統(tǒng)當(dāng)前時間完整示例
這篇文章主要介紹了JavaScript簡單獲取系統(tǒng)當(dāng)前時間的方法,涉及javascript針對日期與時間的判斷以及字符串組合的相關(guān)技巧,需要的朋友可以參考下2016-08-08