JavaScript之全選/反選/取消，for循環閉包

阿新 • • 發佈：2018-10-15

clas aci lsp ddl 分享圖片 als lin anr func

需求:table中要求點擊紅色單元格和點擊checkbox的效果一樣，最後一行點擊就是全選、反選、取消選擇的效果。
技術分享圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        table{
            width: 400px;
            height: 15px;
            background-color: palegreen;
            text-align: center;
        }
        .check{
            width: 20%;
            background-color: indianred;
        }
        input{
            display: inline-block;
            vertical-align:middle;
        }
        div{
            display: inline-block;
            width: 400px;
        }
        div input{
            display: inline-block;
            width: 20%;
        }
        .select{
            background-color: bisque;
        }
    </style>
</head>
<body>
<table border="1" cellpadding="0" cellspacing="0">
    <tr>
        <td class="check"><input class="inputcheck" type="checkbox"></td>
        <td>富貴竹</td>
        <td>綠蘿</td>
    </tr>
    <tr>
        <td class="check"><input class="inputcheck" type="checkbox"></td>
        <td>梔子花</td>
        <td>月季</td>
    </tr>
    <tr>
        <td class="check"><input class="inputcheck" type="checkbox"></td>
        <td>金銀花</td>
        <td>菊花</td>
    </tr>
    <tr>
        <td class="check check4"><input class="inputcheck" type="checkbox"></td>
        <td>玫瑰</td>
        <td>百合</td>
    </tr>
    <tr class="select">
        <td><input class="selectall" type="button" value="全選"> </td>
        <td><input class="reserve" type="button" value="反選"> </td>
        <td><input class="cancel" type="button" value="取消"> </td>
    </tr>
</table>
<script>
    var ele= document.getElementsByTagName("input");
    var check= document.getElementsByClassName("check");
    var inputcheck= document.getElementsByClassName("inputcheck");
    var all = document.getElementsByClassName("selectall")[0];
    var reserve = document.getElementsByClassName("reserve")[0];
    var cancel = document.getElementsByClassName("cancel")[0];

    //for循環閉包
    for(var i=0;i<check.length;i++){
        var td =  check[i];
        td.onclick = function () {
            var td =  check[i];
            return function () {
                var input = td.getElementsByTagName("input")[0];
                if(input.checked){
                    input.checked = false;
                }else {
                     input.checked = true;
                }
            }
        }(i)
    }
    //for循環閉包
    for(var i=0;i<inputcheck.length;i++){
        var input =  inputcheck[i];
        input.onclick = function () {
            var input =  inputcheck[i];
            return function () {
                if(input.checked){
                    input.checked = false;
                }else {
                     input.checked = true;
                }
            }
        }(i)
    }

    //全選
    all.onclick=function () {
        for(var i=0;i<ele.length;i++){
            ele[i].checked=true;
        }
    }
    //反選
    reserve.onclick=function () {
        for(var i=0;i<ele.length;i++){
            if(ele[i].checked){
                ele[i].checked=false;
            }
            else {
                ele[i].checked=true;
            }
        }
    }
    //取消
    cancel.onclick =function () {
        for(var i=0;i<ele.length;i++){
            ele[i].checked=false;
        }
    }
</script>
</body>
</html>

JavaScript之全選/反選/取消，for循環閉包

clas aci lsp ddl 分享圖片 als lin anr func 需求:table中要求點擊紅色單元格和點擊checkbox的效果一樣，最後一行點擊就是全選、反選、取消選擇的效果。 <!DOCTYPE html> <html lang="en"

JS之經典for循環閉包問題解決方法

AI ref length 代碼片段 inf char for循環 AS row <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <t

Python中while，for循環及文件操作，函數，模塊等操作

文件操作 rand 提示 don close choice line 轉發字典此內容本人原創，拒絕商業用途及他人轉發，嚴厲打擊有以上行為，發現後追究法律責任。print內調用變量 >> print "tom is %d,jerry is %d&q

循環語句 while，do while ，for 循環

let length AR i++ 遍歷執行順序 ole 結束 log 循環語句 while do while for while (條件){ 條件滿,時執行的代碼 } 例： let num = 5; while(num){num - -;

第六課-第三講06_03_bash腳本編程之五字符串測試及for循環

art start 是否環境變量 100% 展開字符如果 lar 第六課-第三講06_03_bash腳本編程之五字符串測試及for循環 1.字符測試1）==(=賦值用的)：等號兩側引用變量的結果所以一個等號也可以自動判斷出不是賦值，相等為真，不等為假。一定註意等號兩

每天一點點之vue框架開發 - 數據渲染-for循環中動態設置頁面背景色

循環一點動態 cloud span lin ack for循環 code 實現方式很簡單，在屬性前加：，表示綁定 :style="{‘background‘:item.bgColor} 代碼樣例： <li v-for="item in laber_c

列表操作方法，元祖，for循環嵌套

循環嵌套 range int 輸出都是 ascii 列表排序 for li = [‘alex‘,‘wusir‘‘女神‘]增 1、增加到列表末位 li.append() 連續增加，輸入q停止 li = [‘alex‘,‘wusir‘‘女神‘] while

html之全選反選取消

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <me

全選-反選-取消

hide -c put src rem display borde tle list 1. .checked=false/true: 作用是給方形框勾上或者取消。　　checkbox.checked=true; 表示勾選上了。代碼如下： <!DOCTYPE ht

【JavaScript】計數器+classList使用-純js案例：全選反選

nta ava count 改變 markdown 精簡 javascrip 案例標簽這兩天做了一個全選反選的案例，用了幾種方法，剛開始寫的磕磕絆絆，聽老師講解後理清思路，再來寫就很容易了。其實還是寫代碼時候的思路問題。首先要分析功能，然後分步實現，不要攪在一起。下面幾

javascript教程系列41:表格全選反選,經典案例詳解

註冊事件 tag rap 優化 document iphone8 char value ipad <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"&g

jquery實現全選反選取消

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g

jquery實現checkbox全選/反選/取消

全選反選取消所有 IP port domain action 1.1.1.1 90 1.bai.com 1.1.1.2

jQuery的CheckBox全選反選時，勾選失效的問題

利用removeAttr()和prop()方法，完全沒問題。在做複選框的時候，全選、反選應該是比較常用的功能。我在做這個功能時，發現多次全選、反選之後，頁面展示的“勾選”效果失敗了，頁面上沒有展示出勾選效果。但是追蹤js，發現已經是選中狀態

購物車兩個Adaper，可以刪除，全選反選，數量加減，通過RecycleView巢狀實現

1activity_main.xml主頁面佈局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/andro

購物車一個Adaper，可以刪除，全選反選，數量加減

1activity_main.xml頁面佈局 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schem

購物車功能：使用jQuery實現購物車全選反選，單選，商品增刪，小計等功能

效果圖： html： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>模擬購物車功能-jq</title>

Android_二級列表購物車之增刪改查,全選反選,加減器,價錢數量計算

第一步: 導依賴 Eventbus依賴: compile 'org.greenrobot:eventbus:3.1.1'gson依賴: compile 'com.google.code.gson:gson:2.8.2' OkHttp依賴: compile 'com.squa

JavaScript實現網頁中的常見“全選,全不選,反選”的選項框

在瀏覽網頁或者做線上問卷調查時，我們會經常遇到多選框，多選框的下面會有“全選” “全不選” “反選”三個選框，例如下圖所示：具體程式碼實現如下： <!DOCTYPE html> <

jQuery(5)--實現checkbox的全選,反選，全不選功能

頁面如下：原始碼： <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>demo04.ht

JavaScript之全選/反選/取消，for循環閉包

相關推薦