JS——全選與全不選

阿新 • • 發佈：2017-11-21

rip true har box :hover ont color == elements

1、每個子input標簽都需要進行判斷

2、使用開閉原則，一旦滿足條件就改變默認值

3、在給主input標簽註冊事件時，要求主input標簽的checked值賦值給子標簽

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 300px;
            margin: 100px auto  
0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background 
-color: #09c;
            font: bold 16px "微軟雅黑";
            color: #fff;
        }

        td {
            font: 14px "微軟雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

            tbody tr:hover {
                cursor: pointer;
                background-color: #fafafa;
            }
     
</style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="theadInp" />
                    </th>
                    <th>菜名</th>
                    <th>飯店</th>
                </tr>
            </thead>
            <tbody id="tbody">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>地三鮮</td>
                    <td>田老師</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>西紅柿雞蛋</td>
                    <td>田老師</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>醋溜土豆絲</td>
                    <td>田老師</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>蘿蔔幹炒黃豆兒</td>
                    <td>田老師</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        var inp = document.getElementById("theadInp");
        var tbody = document.getElementById("tbody");
        var inps = tbody.getElementsByTagName("input");
        //給表頭的input標簽註冊事件
        inp.onclick = function () {
            for (var i = 0; i < inps.length; i++) {
                inps[i].checked = this.checked;
            }
        }
        //給tbody中的input標簽註冊事件
        for (var i = 0; i < inps.length; i++) {
            inps[i].onclick = function () {
                var bool = true;
                for (var i = 0; i < inps.length; i++) {
                    if (inps[i].checked === false) {
                        bool = false;
                    }
                }
                inp.checked = bool;
            }
        }
    </script>
</body>
</html>

技術分享圖片

JS——全選與全不選

rip true har box :hover ont color == elements 1、每個子input標簽都需要進行判斷 2、使用開閉原則，一旦滿足條件就改變默認值 3、在給主input標簽註冊事件時，要求主input標簽的checked值賦值給子標簽 <

JS練習：表格全選與全不選

程式碼： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選與全不選</title> <script

JS實現全選與全不選

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

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

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

全選與全不選

scrip chan checkbox true classname elements document false chang <input type="checkbox" id="a" value="" />全選 <input type="check

bootstrap表格結合anglarjs 含全選與全不選（-）

用戶id this 說明 arch mes glob anim != rootscope http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ html-------------- <table id

案例：全選與全不選及反選

註冊 check 全不選 eve 處理所有 class classname box 效果圖如下:點擊全選時會全部選中;全不選時全部不選;反選時反向選中. html結構代碼: <input class = ‘check‘ type="checkbox" >&l

【javaweb】JQ實現複選框的全選與全不選

需求：針對複選框，實現全選和全不選的操作步驟分析：1. 匯入JQ的包 2. 文件載入完成函式: 頁面初始化 &n

dataGridView複選框全選與全不選

//全選 private void button1_Click_1(object sender, EventArgs e) {

使用CheckBox控制元件實現全選與全不選

//cEdit_qx是CheckBox的名字（當然可以任意取） //右擊CheckBox控制元件在方法中找CheckStateChanged private void cEdit

jQuery實現全選與全不選功能

3.1 query event ole jquer ctype inpu function jquery實現初始時：實現功能後：實現該功能的核心代碼： <script> $(function()

jqury簡易實現checkbox反選與全選

all 效果 mage aps 簡單一段 .cn 改變定義前段時間，一個同事讓我幫忙寫個全選與反選的功能，本來一段很簡單的代碼，突然卡頓，寫了好幾個小時，其實之前也做過類似的功能，只是一下子就懵逼了，簡而言之還是自己對checkbox的反選與全選沒有掌握十足，所以再利

JavaScript實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選操作。並且將可變的部分設定為JS的引數，以實現程式碼複用。全選和全不選第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var

【JavaScript】實現複選框的全選、全部不選、反選

以較為簡潔的程式實現複選框的全選、全部不選、反選操作。並且將可變的部分設定為JS的引數，以實現程式碼複用。全選和全不選第一個引數為複選框名稱，第二個引數為是全選還是全部不選。 function allCheck(name,boolValue) { var all

js、jq和標籤裡面設定按鈕可點選與不可點選狀態

<button id="bt1" type="button">button</button> 1、js中設定按鈕可點選與不可點選，預設是可點選的 (1)設定按鈕不可點選 document.getElementById("bt1").disabled=ture;

全排列與全組合

gpo {} ret == AI concat com all cti //全排列 var arr = ["a", "b", "c", "d"]; //實現全排列 function AllPermuAndCombi(arr,length){ var

字串全排列與全組合的遞迴實現-Java版

排列組合演算法用途廣泛, 需要掌握, 為降低門檻, 本文主要關注演算法的邏輯和簡易性, 未重視演算法效率. 結合網路書本上的實現和自己的需求, 這裡列有四個目標: 1. 所有元素的全排列: ab的全排列是ab, ba(順序相關); 2. 所有元素的全組合:

全組合與全排列

一、全組合 public static void Combination( ) { /*基本思路：求全組合，則假設原有元素n個，則最終組合結果是2^n個。原因是： * 用位操作方法：假設元素原本有：a,b,c三個，則1表示取該元素，0表示不取。故去a則是001，取a

【黑金原創教程】【FPGA那些事兒-驅動篇I 】實驗三：按鍵模組② — 點選與長點選

實驗三：按鍵模組② — 點選與長點選實驗二我們學過按鍵功能模組的基礎內容，其中我們知道按鍵功能模組有如下操作： l 電平變化檢測； l 過濾抖動； l 產生有效按鍵。實驗三我們也會z執行同樣的事情，不過卻是產生不一樣的有效按鍵： l 按下有效（點選）； l 長按下有效（長點選）。圖3

JS 控制checkbox 獲取全選全不選一行不選擇全選則不被選擇所有選擇全選被選擇

element selectall -- 頁面 put all for elements 監聽 //點擊全選button的事件操作 function selectAll(){ var allcheckBoxs=document.getEleme

JS——全選與全不選

相關推薦