js做全選，用一個checkbox覆選框做多個checkbox覆選框的全選按鈕，有一個覆選框未被選擇時，全選按鈕的checked就為false

-Advertisement-

js做全選，用一個checkbox覆選框做多個checkbox覆選框的全選按鈕，有一個覆選框未被選擇時，全選按鈕的checked就為false ...

用一個checkbox覆選框做多個checkbox覆選框的全選按鈕，有一個覆選框未被選擇時，全選按鈕的checked就為false，當所有checkbox都被選中時，全選按鈕也被選中。

詳解：

有兩種方式使<input type="checkbox" />中的覆選框被選中。

方法一:直接在HTML行間中添加checked屬性。 eg：<input type="checkbox" checked />

方法二：使用javascript使input對象的checked="true"; eg: document.getElementsByTagName('input')[0].checked='true';

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全選</title>
<script>
window.onload = function(){
    var aInput = document.getElementsByTagName('input');
    var oInput = aInput[0];
    var a = 0;
    var b = 0;
    aInput[0].onclick = function(){
        for (var i = 0; i < aInput.length; i++) {
            if(aInput[0].checked == true){
                aInput[i].checked = true;
            }else{
                aInput[i].checked = false;
            }
        }
    };
    for (var i = 1; i < aInput.length; i++) {
        aInput[i].onclick = function(){
            a = 0;
            b = 0;
            for (var i = 1; i < aInput.length; i++) {
                if (aInput[i].checked == false) {
                    a++;
                }else {
                    b++;
                }
            }
            if(a>0){
                oInput.checked = false;
            }else if(b==aInput.length-1){
                oInput.checked = true;
            };
        };
    }
};
</script>
</head>
<body>
<p><input type="checkbox" name="" />全選</p>
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
<input type="checkbox" name="" /><br />
</body>
</html>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

ES5——函數，對象，方法，this

JS由表達式和語句組成表達式：計算出一個值，但並不進行任何操作，不改變電腦運行狀態語句：包括聲明語句，賦值語句，控制結構函數，對象，方法，this 數組和對象：是兩個非常重要的數據類型函數：是帶有名稱和參數，可被多次調用的代碼段,函數也是對象，所以函數也是數據類型函數可以作為方法和構造 ...
求子串-KPM模式匹配-NFA／DFA

求子串數據結構中對串的5種最小操作子集：串賦值，串比較，求串長，串連接，求子串，其他操作均可在該子集上實現數據結構中串的模式匹配數據結構中串的模式匹配 KPM模式匹配演算法基本的模式匹配演算法看的出來，每當匹配不成功時，i總是回朔本次匹配的開始位置KPM，一種改進了的模式匹配演算法，解決i回朔問 ...
數據交互 - Ajax初體驗

2016-10-22 12:22:42 相關概念 AJAX（Asynchronous Javascript And XML）即“非同步JavaScript和XML”；是指一種實現客戶端和伺服器的數據傳遞的網頁開發技術；核心：局部刷新，非同步載入；即“在不需要刷新頁面的情況下，就可以與Web伺服器交 ...
IndexedDB:瀏覽器里內置的資料庫(轉)

IndexedDB是HTML5規範里新出現的瀏覽器里內置的資料庫。對於在瀏覽器里存儲數據，你可以使用cookies或local storage，但它們都是比較簡單的技術，而IndexedDB提供了類似資料庫風格的數據存儲和使用方式。存儲在IndexedDB里的數據是永久保存，不像cookies那樣只 ...
sass中出現的中文問題

在這園子里看到了很多優秀的資源，自己也想寫寫東西，就突然想到了以前遇到寫sass的時候出現中文亂碼的解決方案。所有就自己又總結了一下。(以下測試步驟都是自己完成的！沒有任何轉載，如有錯誤，希望大家指正) 簡單說明下：sass來編寫css樣式方便了很多，讓我們本來沒有邏輯處理能力的css語法，在sas ...
《理解 ES6》閱讀整理：函數（Functions）（四）Arrow Functions

箭頭函數（Arrow Functions）就像名字所說那樣，箭頭函數使用箭頭（=>）來定義函數。與傳統函數相比，箭頭函數在多個地方表現不一樣。箭頭函數語法（Arrow Function Syntax）箭頭函數有多種實現方法。比如你想實現一個只有一個參數並且直接返回此參數值的函數：上面的例子中 ...
HTML CSS編碼規範(黃金定律)

HTML 語法用兩個空格來代替製表符（tab） -- 這是唯一能保證在所有環境下獲得一致展現的方法。嵌套元素應當縮進一次（即兩個空格）。對於屬性的定義，確保全部使用雙引號，絕不要使用單引號。不要在自閉合（self-closing）元素的尾部添加斜線 --HTML5 規範中明確說明這是可選的。... ...
解決xampp埠衝突

今天電腦按了一下xampp，結果運行wamp的時候，出現了下麵的情況: 在網上查了一下，結果是埠被占用，然後我就手動修改了一下。 1.修改xampp的埠號依次找到：XAMPP的安裝目錄(比如D:\xampp)\apache\conf\httpd.conf,用記事本或notepad等工具打開ht ...