用JavaScript實現CheckBox的全選取消反選，及遮罩層中添加內容

阿新 • • 發佈：2018-06-14

document 當前 CI itl HA posit size classlist ML

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         .c1 {
  8             position: fixed;
  9             top: 0;
 10             right: 0;
 11             left: 0;
 12             bottom: 0 
;
 13             background-color: black;
 14             opacity: 0.5;
 15             z-index: 9;
 16         }
 17 
 18         .c2 {
 19             width: 500px;
 20             height: 400px;
 21             background-color: white;
 22             position: fixed;
 23             left: 50%;
 24             top: 50 
%;
 25             margin-left: -250px;
 26             margin-top: -200px;
 27             z-index: 10;
 28         }
 29 
 30         .c3 {
 31             display: none;
 32         }
 33 
 34     </style>
 35 </head>
 36 <body style="margin: 0 auto">
 37 
 38 <div>
 39 
 40     <input type 
="button" value="添加" onclick="add()">
 41     <input type="button" value="全選" onclick="ChooseAll()">
 42     <input type="button" value="取消" onclick="CancleAll()">
 43     <input type="button" value="反選" onclick="ReverseAll()">
 44     <table>
 45         <thead>
 46         <tr>
 47             <th>請選擇</th>
 48             <th>主機名</th>
 49             <th>端口</th>
 50         </tr>
 51         </thead>
 52         <tbody id="tb">
 53         <!--給tbody設置ID用來找到它，然後循環它的孩子-->
 54         <tr>
 55             <td><input type="checkbox"></td>
 56             <td>192.168.99.1</td>
 57             <td>3389</td>
 58         </tr>
 59 
 60         <tr>
 61             <td><input type="checkbox"></td>
 62             <td>192.168.99.2</td>
 63             <td>3306</td>
 64         </tr>
 65 
 66         <tr>
 67             <td><input type="checkbox"></td>
 68             <td>192.168.99.3</td>
 69             <td>8080</td>
 70         </tr>
 71         </tbody>
 72     </table>
 73 </div>
 74 <!-- 遮罩層開始-->
 75 <div id="i1" class="c1 c3">
 76 
 77 
 78 </div>
 79 <!-- 遮罩層結束-->
 80 
 81 <!-- 彈出框開始-->
 82 
 83 <div id="i2" class="c2 c3">
 84     <p>
 85         <input name="ip" type="text">
 86         <input name="duankou" type="text">
 87     </p>
 88     <p>
 89         <input type="button" value="確定" onclick="go()">
 90         <input type="button" value="取消" onclick="goback()">
 91     </p>
 92 </div>
 93 <!-- 彈出框開始-->
 94 
 95 <script>
 96     function add() {
 97         document.getElementById(‘i1‘).classList.remove(‘c3‘)
 98         document.getElementById(‘i2‘).classList.remove(‘c3‘)
 99     }
100 
101     function goback() {
102         document.getElementById(‘i1‘).classList.add(‘c3‘)
103         document.getElementById(‘i2‘).classList.add(‘c3‘)
104     }
105 
106     function go() {
107         var v1 = document.getElementById(‘i2‘).valueOf(‘ip‘).alert(v1)
108     }
109 
110     //全選
111     function ChooseAll() {
112         var tbody = document.getElementById(‘tb‘)//根據ID找到tbody
113         var tr_list = tbody.children             //獲取子標簽，並生成列表
114         for (i = 0; i < tr_list.length; i++) {           //循環tr_list得到每一個tr
115             var current_tr = tr_list[i];        //拿到拿到每個td的子標簽，也就是裏面的所有的tr生成一個列表
116             var checkbox = current_tr.children[0].children[0];//得到第一個tr裏的第一個子標簽也就是CheckBox了
117             checkbox.checked = true;               //checkbox.checked是獲取當前CheckBox的值是true還是false
118             // 當然此時肯定是false，我們只需要讓他等於true就可以修改他的當前狀態為打上對勾的了
119         }
120     }
121 
122     //取消
123     function CancleAll() {
124         var tbody = document.getElementById(‘tb‘)//根據ID找到tbody
125         var tr_list = tbody.children             //獲取子標簽，並生成列表
126         for (i = 0; i < tr_list.length; i++) {           //循環tr_list得到每一個tr
127             var current_tr = tr_list[i];        //拿到拿到每個td的子標簽，也就是裏面的所有的tr生成一個列表
128             var checkbox = current_tr.children[0].children[0];//得到第一個tr裏的第一個子標簽也就是CheckBox了
129             checkbox.checked = false;               //checkbox.checked是獲取當前CheckBox的值是true還是false
130             // 當然此時肯定是false，我們只需要讓他等於false就可以修改他的當前狀態為去掉對勾了
131         }
132 
133     }
134 
135     //反選
136     function ReverseAll() {
137         var tbody = document.getElementById(‘tb‘)//根據ID找到tbody
138         var tr_list = tbody.children             //獲取子標簽，並生成列表
139         for (i = 0; i < tr_list.length; i++) {           //循環tr_list得到每一個tr
140             var current_tr = tr_list[i];        //拿到拿到每個td的子標簽，也就是裏面的所有的tr生成一個列表
141             var checkbox = current_tr.children[0].children[0];//得到第一個tr裏的第一個子標簽也就是CheckBox了
142             var type = checkbox.checked;            //checkbox.checked是獲取當前CheckBox的值是true還是false
143             if (type == true) {                             //然後對當前狀態進行判斷 ；如果是true就將他改成false
144                 // 如果是false就將他改成true;即可將他反選
145                 checkbox.checked = false;
146             }
147             else {
148                 checkbox.checked = true;
149             }
150         }
151     }
152 
153 
154 </script>
155 
156 </body>
157 </html>

知識點：

checkbox.checked獲取當前CheckBox的當前值

document.getElementById()根據ID找到標簽
標簽.children  找到子標簽並生成列表

for (i = 0; i < 標簽標簽.length; i++) 循環標簽列表 得到每一個子標簽

效果如下圖

用JavaScript實現CheckBox的全選取消反選，及遮罩層中添加內容

document 當前 CI itl HA posit size classlist ML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha

表格全選取消反選

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

畢設-BootStrap點選隱藏Modal後出現陰影遮罩層

莫名遭遇奇怪的Modal隱藏後出現陰影遮罩層先是用 $(".modal-backdrop").remove(); 去掉陰影，但是又出現一個問題：點選顯示Modal模態框，但是閃爍一下又消失了，然後才知道一切的原因包括上面那個陰影遮罩層都是因為引入了兩個bootstra

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

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

用Jquery實現checkbox的反選、全選、全不選

$(function () { //全不選 $("#AllNotChk").click(function () { $("[name=chkbox_id]").removeAttr("checked");

JQuery實現全選、反選和取消功能

oct put 執行 tab function src color gpo 不用 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

利用jQuery實現全選、全不選、反選(checkBox)

utf body type charset his all set htm script <!DOCTYPE html><html><head><meta charset="utf-8"><title

純js實現checkbox的全選、反選、全不選

純js實現checkbox的全選、反選、分開：a. 代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> &l

jQuery js實現checkbox復選框全選、全不選、反選 PHP

實現 com check set false jquer display value round <!doctype html> <html lang="en"> <head> <meta charset="

用jQuery實現（全選、反選、全不選功能）

sele 元素 selectall input html元素 UNC 推薦 not rop 在jQuery選擇器的基礎下我們實現一個全選，反選，全不選功能！ <script type="text/javascript"> $(functio

bootstrap實現checkbox全選、取消全選

del true itl rip href doc 名稱 .get role <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 最新版本的 Bootst

vue.js簡單實現checkbox全選,反選,多選

1.html <table> <tr> <th class=""> <div class=""> <input type="checkbox" id="checkAll" @click="cli

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

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

JavaScript複選框實現全選、全不選、反選、提交

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>全選<

JQuery實現checkbox全選和反選

function selectAll(){ //id=all是全選/反選的checkbox，判斷是選中還是沒選中 var isChecked=$("#all").is(':checked'); //獲取所有checkbox組成的陣列 var checkedArrs=$("inpu

用JQuery實現全選、全不選、反選

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="js/jquery-1.4.1.min.js

JS實現checkbox全選/全不選，單個複選框取消不全選

HTML： <input id="all" type="checkbox"/>全選 <hr /> <div> <input type="checkbox" class="box"/> <br/> <i

用angular實現多選按鈕的全選與反選

在頁面中我們常常會遇到多選框，例如購物車裡的商品下面用angular來實現這一功能 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

JQuery實現的 checkbox 全選、反選。

發現網上寫的全選的程式碼，不是完整的，是有bug的。全選它分幾種情況 1. 全選的checkbox選中時，子checkbox全部選中。反之，全部不選 2.子checkbox中，只要有沒有被選中的，取消全選checkbox的選中 3.子checkbox的數量和子checkbo

js實現checkbox全選和取消，子複選框全選時全選框也自動選上

<input type="checkbox" id="allcheck" onclick="demo()" />全選 <input type="checkbox" name="choice" class="checknum" onclick="se

用JavaScript實現CheckBox的全選取消反選，及遮罩層中添加內容

相關推薦