[作特效, 學JS] -- 09 正經的 全選和反選

時間  2019-11-17
標籤 特效 正經 全選 欄目 JavaScript 简体版
原文   原文鏈接

最終效果

實現功能

  1. 點擊全選, 全部的複選框全選, 全選文字變成全不選
  2. 點擊全不選, 全部的複選框所有不選, 全不選文字變成全選
  3. 複選框能夠單個點擊
  4. 點擊反選, 全部複選框狀態取反
  5. 若是全部複選框選中, 則全選文字變成全不選
  6. 若是有複選框沒有選中, 則全不選文字變成全選

最終代碼

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>複選框（checkbox）全選/全不選/返選</title>
        <style> body, dl, dt, dd, p { margin: 0; padding: 0; } body { font-family: Tahoma; font-size: 12px; } label, input, a { vertical-align: middle; } label { padding: 0 10px 0 5px; } a { color: #09f; text-decoration: none; } a:hover { color: red; } dl { width: 120px; margin: 10px auto; padding: 10px 5px; border: 1px solid #666; border-radius: 5px; background: #fafafa; } dt { padding-bottom: 10px; border-bottom: 1px solid #666; } dt label { font-weight: 700; } p { margin-top: 10px; } </style>
    </head>
    <body>
        <dl>
            <dt>
                <input type="checkbox" id="checkAll" />
                <label>全選</label>
                <a href="javascript:;">反選</a>
            </dt>
            <dd>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（一）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（二）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（三）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（四）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（五）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（六）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（七）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（八）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（九）</label>
                </p>
                <p>
                    <input type="checkbox" name="item" />
                    <label>選項（十）</label>
                </p>
            </dd>
        </dl>
        <center>
            一、切換全選/全不選文字；
            <br />
            <br />
            二、根據選中個數更新全選框狀態；
        </center>
        <script src="demo.js"></script>
    </body>
</html>
複製代碼
window.onload = function(){
	// 找對象, 全選, 反選, 所有複選框
	var oSelectAll = document.querySelector("#checkAll");
	var oInvertSelect = document.querySelector("a");
	var aCheckbox = document.querySelectorAll('p>input');
	var oSelectAllLabel = document.querySelector('dt>label');
	//全選按鈕的點擊事件
	oSelectAll.onclick = function(){
		for(var i = 0;i<aCheckbox.length;i++){
			aCheckbox[i].checked = this.checked;
		}
		isSelectAll();
	}


	for (var i = 0; i < aCheckbox.length; i++) {
		aCheckbox[i].onclick = isSelectAll;
	}


	// 判斷全部複選框是否所有選中
	// 若是所有選中, 第一個複選框勾上, 文字改爲"全不選"
	// 若是沒有所有選中, 第一個複選框, 應該沒有選中, 文字應該是"全選"
	function isSelectAll(){
		var count = 0;
		for (var i = 0; i < aCheckbox.length; i++) {
			if(aCheckbox[i].checked){
				count++;
			}
		}
		if(count == aCheckbox.length){
			oSelectAll.checked = true;
			oSelectAllLabel.innerHTML = "全不選";
		}else{
			oSelectAll.checked = false;
			oSelectAllLabel.innerHTML = "全選";
		}
	}

	// 反選, 全部複選框狀態取反
	oInvertSelect.onclick = function(){
		for (var i = 0; i < aCheckbox.length; i++) {
			aCheckbox[i].checked = !aCheckbox[i].checked;
		}
		isSelectAll();
	}
}
複製代碼

專欄地圖

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程