第JS實(shí)現(xiàn)表單全選以及取消全選實(shí)例本文實(shí)例為大家分享了JS實(shí)現(xiàn)表單全選以及取消全選的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)效果：

全選按鈕：點(diǎn)擊全選按鈕所有的小按鈕都會(huì)被選中；點(diǎn)掉全選按鈕，所有按鈕取消選中；

小按鈕：只有全部被選中，全選按鈕才會(huì)被選中

思路分析：

1、全選和取消全選做法：讓下面所有復(fù)選框的checked屬性（選中狀態(tài)）跟隨全選按鈕即可

使用this.checked可以獲得當(dāng)前復(fù)選框的狀態(tài)，如果是true就代表被選中，如果是false就代表沒被選中。

注：input的checked屬性是一個(gè)布爾屬性，checked屬性規(guī)定在頁面加載時(shí)應(yīng)該被預(yù)先選定的input元素。

inp[i].checked=this.checked;使下面所有的復(fù)選框的checked屬性值等同于全選按鈕的checked值，跟隨全選按鈕的狀態(tài)。

this.checked得到的是true或是false，如果是true，就把true賦值給所有下面的復(fù)選框的checked屬性。

想實(shí)現(xiàn)全選和取消全選，最核心的思路就在于：把全選按鈕當(dāng)前是否選中的狀態(tài)，將這個(gè)狀態(tài)賦給下面所有復(fù)選框

2、下面的復(fù)選框需要全部選中，上面全選按鈕才是選中狀態(tài)的做法：（下面復(fù)選框的小按鈕有一個(gè)沒被選中，那么全選按鈕也是沒被選中的狀態(tài)）給下面的復(fù)選框綁定點(diǎn)擊事件，每次點(diǎn)擊都要循環(huán)查看下面復(fù)選框是否還有沒被選中的，如果有一個(gè)沒被選中的，上面全選就不選中。

3、可以設(shè)置一個(gè)變量來控制全選按鈕是選中還是沒選中。varflag=true；

代碼：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title表單全選+取消全選/title

style

*{

margin:0;padding:0;

}

table{

width:500px;

position:relative;

margin:100pxauto;

border-collapse:collapse;

border:1pxsolid#d7d7d7;

}

theadtr{

background-color:#222;

font-weight:600;

color:#e9e9e9;

}

tbodytr:hover{

background:#F5F5F5;

}

tabletr{

text-align:center;

height:30px;

}

/style

/head

body

tableborder=1

thead

tr

tdinputtype="checkbox"id='cekall'/td

td商品/td

td價(jià)錢/td

/tr

/thead

tbody

tr

tdinputtype="checkbox"name=""id=""/td

tdiPhone11/td

td5999.0/td

/tr

tr

tdinputtype="checkbox"name=""id=""/td

td榮耀20/td

td2299.0/td

/tr

tr

tdinputtype="checkbox"name=""id=""/td

tdiPhoneXR/td

td4499.0/td

/tr

/tbody

/table

/body

script

//1、全選和取消全選做法：讓下面所有復(fù)選框的checked屬性（選中狀態(tài)）跟隨全選按鈕即可

//獲取元素，獲取全選按鈕和下面小的復(fù)選框

varcekall=document.getElementById('cekall');

varinp=document.querySelector('tbody').getElementsByTagName('input');

//注冊(cè)事件

cekall.onclick=function(){

//this.checked

可以得到當(dāng)前復(fù)選框的選中狀態(tài)，如果是true就是選中，如果是false就是未選中

console.log(this.checked);

for(vari=0;iinp.length;i++){

inp[i].checked=this.checked;

}

}

//2、下面的復(fù)選框要全部選中，上面的全選按鈕才能夠全部選中，給下面的所有復(fù)選框綁定事件，每次點(diǎn)擊，都要循環(huán)查看下面下面所有的復(fù)選框是否有沒選中的，如果有沒選中的復(fù)選框，那么上面的全選按鈕就不選中。

for(vari=0;iinp.length;i++){

inp[i].onclick=function(){

//設(shè)置一個(gè)變量來控制按鈕是否全部選中

varflag=true;

//每次點(diǎn)擊下面的復(fù)選框都要檢查下面的四個(gè)小按鈕是否被全部選中。

for(vari=0;iinp.length;i++){

if(!inp[i].checked){

flag=false;

}

}