利用JavaScript實現(xiàn)簡單全選和全不選的思路和方法

更新時間：2022年07月22日 09:01:55 作者：小余努力搬磚

最近開始練習(xí)js的基本操作,常常因為一些小疏忽導(dǎo)致頁面效果無法實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于利用JavaScript實現(xiàn)簡單全選和不全選的思路和方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、思路

我們要做到，選擇了全選按鈕，讓下面的所有的按鈕都要勾取。實現(xiàn)的思路是，全選的按鈕是否勾取，勾取后通過for循環(huán)來得到每一個按鈕，賦值上全選按鈕的勾取狀態(tài)。

展示效果1：

有了全選按鈕，實現(xiàn)其他按鈕的勾取，我們也要實現(xiàn)，主動勾取完了所有按鈕，全選按鈕要自動勾取，反之沒有勾取完，全選按鈕不處于勾取狀態(tài) 效果展示2：

二、實現(xiàn)效果

1.h5的布局

主要由復(fù)選框構(gòu)造一個全選按鈕，在使用ul設(shè)置其他的選擇按鈕復(fù)選框：checkbox

css的布局簡單的刪除li前面的默認(rèn)樣式。

<style>
    li{
        list-style: none;
    }
</style>

    <input type="checkbox" id="selectAll">我的愛好
    <ul class="ckboxs">
        <li><input type="checkbox">唱歌</li>
        <li><input type="checkbox">打球</li>
        <li><input type="checkbox">跳舞</li>
        <li><input type="checkbox">跑步</li>
        <li><input type="checkbox">畫畫</li>
    </ul>

2.js代碼

1.獲取元素

 let selectAll = document.querySelector('#selectAll');
 let ckboxs = document.querySelectorAll('.ckboxs input');

2.獲取全選，通過循環(huán)將選擇按鈕都賦上選擇狀態(tài)

selectAll.onclick=function(){
         //  全選按鈕的狀態(tài)
let state = selectAll.checked;
           
        //循環(huán)每一個ckboxs，為全選狀態(tài)
for(let i=0;i<ckboxs.length;i++){
            ckboxs[i].checked=state;
        }

3.設(shè)置，選擇按鈕全勾選后，全選按鈕自動勾取，反之則取消勾取

  for(let i=0;i<ckboxs.length;i++){
        ckboxs[i].onclick=function(){
            //默認(rèn)都勾取
        let flag = true;
        for(j=0;j<ckboxs.length;j++){
        if(ckboxs[j].checked==false){
        //如果checked如果有一個沒選上就是false
            flag=false;
            }
}
        selectAll.checked=flag;
            }
}

附：JavaScript實現(xiàn)全選、不選、反選功能完整實例

點擊全選按鈕，下面的列表項會被全部選擇；

點擊不選按鈕，選項全部取消選擇；

先在列表中選擇幾項，再點擊反選按鈕，之前被選擇的會取消選擇，之前沒被選擇的會變成選擇狀態(tài)。

下面是實現(xiàn)代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hh</title>
<script type="text/javascript">
? ? window.onload=function(){
? ? ? ? var oBtn1=document.getElementById('btn1');
? ? ? ? var oBtn2=document.getElementById('btn2');
? ? ? ? var oBtn3=document.getElementById('btn3');
? ? ? ? var oDiv=document.getElementById('div1');
? ? ? ? var oCh=oDiv.getElementsByTagName('input');
? ? ? ? oBtn1.onclick=function()
? ? ? ? {
? ? ? ? ? ? for (var i = 0; i < oCh.length; i++)?
? ? ? ? ? ? {
? ? ? ? ? ? oCh[i].checked=true;
? ? ? ? ? ? } ? ? ? ? ??
? ? ? ? };

? ? ? ? oBtn2.onclick=function()
? ? ? ? {
? ? ? ? ? ? for (var i = 0; i < oCh.length; i++)?
? ? ? ? ? ? {
? ? ? ? ? ? oCh[i].checked=false;
? ? ? ? ? ? } ? ? ? ? ??
? ? ? ? };
? ? ? ? oBtn3.onclick=function()
? ? ? ? {
? ? ? ? ? ? for (var i = 0; i < oCh.length; i++)?
? ? ? ? ? ? {
? ? ? ? ? ? ? ? if (oCh[i].checked==true)
? ? ? ? ? ? ? ? ? ? oCh[i].checked=false;
? ? ? ? ? ? ? ? else
? ? ? ? ? ? ? ? ? ? oCh[i].checked=true;
? ? ? ? ? ? } ? ? ? ? ??
? ? ? ? };
? ? };

</script>
</head>

<body>
<input id="btn1" type="button" value="全選">
<input id="btn2" type="button" value="不選">
<input id="btn3" type="button" value="反選"><br>

<div id="div1">
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
</div>
</body>
</html>