JS實現全選、不選和反選效果

阿新 • • 發佈：2019-01-27

利用javascript實現全選、不選和反選效果
這個啥也不用多說，直接來程式碼，程式碼中自有註釋幫你理解

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function(){
                // 獲取所有的按鈕
                var btns = document.getElementsByTagName("button" 
);
                // 獲取所有的選項input
                var inputs = document.getElementsByTagName("input");

                // 全選或者不選的時候 呼叫此函式
                function fun(flag){
                    for (var i=0; i<inputs.length;i++) {
                        inputs[i].checked = flag;
                    }
                }

                //獲取第一個按鈕  “全選” 

                btns[0].onclick = function(){
                    fun(true);
                }

                // 獲取第二個按鈕 "不選"
                btns[1].onclick = function(){
                    fun(false);
                }
                // 獲取第三個按鈕 “反選”
                btns[2].onclick = function(){
                    // 遍歷所有的選項，判斷每一個選項是否被選中 

                    for (var i=0;i<inputs.length;i++) {
                        inputs[i].checked == true ? inputs[i].checked = false : inputs[i].checked = true;
                    }
                }

            }
        </script>
    </head>
    <body>
        <div id="box1">
            <button>全選</button>
            <button>不選</button>
            <button>反選</button>
        </div>
        <div id="box2">
            <ul>
                <li>選項1：<input type="checkbox"></li>
                <li>選項2：<input type="checkbox"></li>
                <li>選項3：<input type="checkbox"></li>
                <li>選項4：<input type="checkbox"></li>
                <li>選項5：<input type="checkbox"></li>
                <li>選項6：<input type="checkbox"></li>
                <li>選項7：<input type="checkbox"></li>
                <li>選項8：<input type="checkbox"></li>
                <li>選項9：<input type="checkbox"></li>

            </ul>
        </div>

    </body>
</html>

效果展示
這裡寫圖片描述

其他實現效果，自行檢視！

今天一位好友，給我指出，在反選效果中，此程式碼

inputs[i].checked = false : inputs[i].checked = true;

可以精簡為

inputs[i].checked = !inputs[i].checked;

效果還是一樣的。在這裡表示衷心的感謝。也希望看到的朋友，如果對我寫的程式碼有更好的建議，請多多賜教。我一定虛心向你學習！

js實現60秒內不能重複點選按鈕

在網頁中經常看到一個傳送驗證碼的按鈕，點選之後變成60s遞減一直到了0秒後又變成文字傳送驗證碼。並且才能繼續點選。這個利用到了 js當中的定時器。我這裡就改成了5s後才能再次點選。其道理是一樣的。

Django 【第十九篇】JS實現的ajax、同源策略和前端jsonp解決跨域問題

學習 tab頁 hello shortcuts 就會 coo 功能介紹 onclick decorator 一、回顧jQuery實現的ajax 首先說一下ajax的優缺點優點： AJAX使用Javascript技術向服務器發送異步請求； AJAX無須刷新整個頁面；

JS實現全選、不選和反選效果

利用javascript實現全選、不選和反選效果這個啥也不用多說，直接來程式碼，程式碼中自有註釋幫你理解 <!DOCTYPE html> <html> <head> <meta char

js實現復選框的全選、全部選和反選

item itl true mon 復選框 loading 實現 align inpu 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta chars

利用js實現全、反選、全不選功能(check)

box tag 實現所有利用 .get 乒乓球獲取 get <!DOCTYPE html><html><head><meta charset="utf-8"/><title></ti

利用js實現全選、反選、全不選(button)

put () false 全選 charset btn tel pre fun <!DOCTYPE html><html><head><meta charset="utf-8"/><title>

JQuery案例二：實現全選、全不選和反選

lap lsp enter scrip ttr on() class cells span <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

線上選課案例—通過js實現全選，全不選和多選效果。順便談談理解的半吊子flag這個變數

要點： 1.首先分為兩個業務邏輯的模組，首先全選/取消全選的按鈕會的選中的狀態或者沒有選中，他的返回值是Boolean型別，也就是說通過通過這個通過全選按鈕將其Boolean型別的值，通過迴圈賦值給全選框下面所有的單選按鈕 2.再單選按鈕執行之前，將所有的單選按鈕狀態做一次判斷，判斷是否

vue.js實現全選和反選

自己學習vue的一個小例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script

利用js實現複選框的全選和反選

<!DOCTYPE html> <html> <head> <title>142</title> <meta charset="utf-8"> <script type="t

原生JS實現全選全不選小demo

很久沒有寫部落格了，今天又回頭學習了一下原生JS 來寫了一個簡單的小demo，實現複選框的全選全不選的操作。實現的效果如下：具體程式碼： <!DOCTYPE html> <html> <he

使用JQuery表單選擇器,實現全選/全不選/和反選的效果

//正選 function test() { if($("#allLike").val() == "都喜歡") { $(":checkbox").attr("checked", true)

JS實現全選與全不選

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>隔行換色</title><script>function chanclo(){//獲取標籤var arr= d

用Vue.js實現全選與全不選刪除功能

這是實現全選與全不選邏輯的程式碼，大家只要給相應的控制元件再加上刪除邏輯就完成了全選與選不選、單選等刪除功能了；這段程式碼經過我很多次強暴，是可以用的。 <template> <div id="hello"> <ol>

vuejs2實現全選和反選，不使用id

使用vuejs2實現全選和反選，其實網上都有很多的教程了，這一次我寫，主要是使用index，而不是使用id，因為有些時候，如果資料傳輸過多，後端不會給id的，這時候，就需要使用index來進行全選的功

js實現全選，全不選，反選，批量刪除等（Yii）

效果展示：程式碼實現： <?php header("content-type:text/html;charset=utf-8"); use yii\helpers\Html; u

JS利用複選框實現全選和反選

js react 全選和反選

.get document con asc cli length record bin highlight onCheckAll = (data) => { var CheckBox = document.getElementsByName(data);

多選框checkbox全選全不選和反選

沒有 index ntb -1 點擊事件 ner 空數組一個多個在判斷多選框中的某一個是否被選中時，我們可以用checked的屬性選中了就返回true，沒被選中就返回false; 這是html代碼： <form action="#"> <la

Delphi實現DBGrid全選和反選功能

web log con ont procedure del div 操作 var Delphi實現Dbgrid全選和反選、清除全選的功能，不管是在Delphi下，還是在WEB開發中，這種功能都是很實用的，是進行數據批量操作的基礎。本模塊就是實現了為Delphi的DB

JS實現全選、不選和反選效果

相關推薦