web前端基礎教程用layui獲取checkbox

web前端基礎教程用layui獲取checkbox復選框值

eb前端教程,前端開發知識點

layui更多是面向于后端開發者，所以在組織形式上依然采用了幾年前的以瀏覽器為宿主的類AMD模塊管理方式，卻又并非受限于CommonJS的那些條條框框，它擁有自己的模式，更加輕量和簡單。

獲取layui表單復選框已選中的數據:

　　html

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<metacharset="utf-8">

　　<title>layui.form.checkbox獲取選中</title>

　　<linkrel="stylesheet"href="layui/css/layui.css"media="all">

　　</head>

　　<body>

<formclass="layui-form">

　　<divclass="layui-form-item">

　　<labelclass="layui-form-label">復選框</label>

　　<divclass="layui-input-block">

　　<inputtype="checkbox"name="CSDN"lay-filter="like"title="復選框一"value="dongsir">

　　<inputtype="checkbox"name="CSDN"lay-filter="like"title="復選框二"value="董先生">

　　</div>

　　<divclass="layui-form-item">

　　<labelclass="layui-form-label">開關關</label>

　　<divclass="layui-input-block">

　　<inputtype="checkbox"name="switch"lay-skin="switch"value="董輝">

　　</div>

　　<divclass="layui-form-item">

　　<labelclass="layui-form-label">開關開</label>

　　<divclass="layui-input-block">

　　<inputtype="checkbox"name="switch"checkedlay-skin="switch"value="董先生的CSDN">

　　</div>

　　<divclass="layui-form-item">

　　<divclass="layui-input-block">

　　<buttonclass="layui-btn"lay-submitlay-filter="*">立即提交</button>

　　</div>

　　</form>

　　<scriptsrc="layui/layui.js"></script>

　　layui.use('form',function(){

　　varform=layui.form,

　　$=layui.$;

　　//各種基于事件的操作。

　　form.on('submit(*)',function(data){

　　//將頁面全部復選框選中的值拼接到一個數組中

　　vararr_box=[];

　　$('input[type=checkbox]:checked').each(function(){

　　arr_box.push($(this).val());

　　});

　　//數組

　　console.log(arr_box);

　　//["董先生的CSDN"]

　　returnfalse;//阻止表單跳轉。如果需要表單跳轉，去掉這段即可。

　　});

　　如果需要字符串的話，再將數組轉為字符串

　　console.log(arr_box.toString());

　　//dongsir,董先生,董先生的CSDN

　　如果需要自定義分割字符的字符串

　　console.log(arr_box.join(","));

　　//dongsir,董先生,董先生的CSDN

?layui，是一款采用自身模塊規范編寫的前端UI框架，遵循原生Html/CSS/JS的書寫與組織形式，門檻極低，拿來即用。其外在極簡，卻又不失飽滿的內在，體積輕盈，組件豐盈，從核心代碼到API的每一處細節都經過精心雕琢，非常適合界面的快速開發。

以上就是酷仔今日整理發布的“web前端基礎教程用layui獲取checkbox復選框值”一文，希望為正在學習Web前端layui的朋友提供參考.

言

在之前的一篇文章《默認的input標簽太丑？教你如何使用CSS寫出帶動畫的樣式》中有講過如何實現一個漂亮的input標簽樣式。

既然已經折騰了，今天這篇文章我們就繼續折騰，看看如何通過CSS3實現一個帶動畫的checkbox樣式？

CSS3

感興趣的可以自行去github上看源文件，地址如下：

https://github.com/zhouxiongking/article-pages/blob/master/articles/beautifulCheckbox/beautifulCheckbox.html

checkbox

checkbox作為多選框，在form表單中的使用頻率是非常高的，例如問卷調查的多選題，個人興趣愛好的選擇時都會用到多選框。

而瀏覽器默認的checkbox樣式都很丑，看起來就是一個小小的方框，雖然Bootstrap已經有好看的checkbox樣式，但是它不支持動畫，在交互上仍然存在缺陷，所以我們就試圖自己寫出一個帶動畫的checkbox效果。

首先我們來看看checkbox的動態效果圖（中間的黑色圓圈實際為錄制GIF圖時產生的，請忽略）

checkbox效果圖

具體組成

接下來我們具體分析下頁面的元素組成，主要包括以下部分。

默認的checkbox標簽，將其display設置為none，隱藏起來。
label標簽，表現為實際顯示的動態選中和未選中效果。

我們需要達到的效果是，在未選中checkbox時，默認為灰色的邊框，白色的背景；在選中checkbox時，改變背景色，出現白色的打勾動畫效果。

代碼組成

在這部分，我們來具體分析下頁面的代碼組成。

HTML

首先是頁面的HTML部分代碼，如上一部分所示，頁面其實只有兩個元素組成，這兩個元素放在一個容器下，故HTML代碼如下所示。

HTML部分代碼

我們來看看CSS部分的代碼，因為CSS部分代碼比較多，我們一一來分析。

首先是外層container的樣式，同時對頁面的html和body也做一些簡單處理，代碼如下所示。

container樣式

其次是checkbox標簽的樣式，因為原生的checkbox除了在傳輸數據時有用處，在頁面呈現上并沒有作用，故設置display:none;將其隱藏。

checkbox樣式

然后是最重要的label部分，在未點擊之前label呈現一個正方形，有基本的樣式。

基本樣式

在點擊方形框后，出現的對勾是通過偽元素::before和::after實現的，對勾實際為兩個矩形拼接而成，左側的矩形用::after元素表示，右側的矩形用::before元素表示。兩者的通用樣式通過如下代碼實現。

偽元素實現

然后是針對::before和::after所特有的樣式，因為兩者的位置和旋轉的角度不同，代碼也會出現差異。

特有樣式

然后是定義的打鉤的動畫效果，這里使用keyframes關鍵字定義，考慮到瀏覽器兼容性，定義的動畫具有不同的前綴。定義的動畫也包括兩部分，首先是右側的矩形動畫效果。

右側矩形動畫效果

然后是左側矩形的動畫效果，同樣考慮到瀏覽器的兼容性，樣式代碼如下。

左側矩形動畫

至此，所有代碼都已講解完畢，如果運行之后就會看到文章開始的動畫效果。

結束語

本篇文章主要講的是如何使用自定義的動畫完成checkbox效果，感興趣的可以直接去github上看源文件代碼，后續會寫一個跟開關switch有關的文章，敬請期待~

ue基于t-ui的三級CheckBox復選框elemen

出自：http://www.cnblogs.com/wangmingcong/p/9781775.html?utm_source=tuicool&utm_medium=referral

最近vue項目需要用到三級CheckBox復選框，需要實現全選反選不確定三種狀態。但是element-ui table只支持多選行，并不能支持三級及以上的多選，所以寫了這篇博客以后學習使用。

效果圖預覽：

首先是頁面布局，當然也可已使用table，但是自己用flex布局后面更容易增刪改查其他功能

 1 <div class="deliverySetting-table">
 2 <div class="table-head">
 3 <div class="selection">
 4 <el-checkbox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange"></el-checkbox>
 5 </div>
 6 <div class="width185">分區名稱</div>
 7 <div class="width265">國家</div>
 8 <div>派送商</div>
 9 </div>
10 <div class="table-body" v-for="(partition,partitionIndex) in distributorsInfo" :key="partitionIndex">
11 <div class="selection">
12 <p><el-checkbox :indeterminate="partition.indeterminate" v-model="partition.selected" @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)" :key="partitionIndex"></el-checkbox></p>
13 </div>
14 <div class="width185"><p>{{ partition.partitionName }}</p></div>
15 <div class="width265">
16 <el-checkbox v-for="country in partition.country" v-model="country.selected" @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)" :label="country" :key="country.id">{{country.fieldName}}</el-checkbox>
17 </div>
18 <div>
19 <p v-for="(item,index) in partition.country" :key="index">
20 {{ item.distributors }}
21 </p>
22 </div>
23 </div>
24 </div>

接下來是數據結構，自定義的，可以更后臺商議，但是字段indeterminate（顯示不確定狀態~符號），selected（CheckBox選中狀態）一定要讓后臺加入到data中，其他可以按照后臺數據來。

 2 distributorsInfo:[
 3 { partitionName:'1區',selected:false,partitionId:1,isIndeterminate:false,
 4 country:[
 5 { id: "1",fieldName: "奧地利",fieldTableName: "奧地利",distributors:'UPS',selected: false},
 6 { id: "2",fieldName: "芬蘭",fieldTableName: "芬蘭",distributors:'UPS',selected: false},
 7 { id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false},
 8 { id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false},
 9 { id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false},
10 { id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},]
11 },
12 { partitionName:'2區',selected:false,partitionId:2,isIndeterminate:false,
13 country:[
14 { id: "5",fieldName: "丹麥",fieldTableName: "單買",distributors:'',selected: false},
15 { id: "6",fieldName: "法國",fieldTableName: "法國",distributors:'',selected: false},]
16 },
17 { partitionName:'3區',selected:false,partitionId:3,isIndeterminate:false,
18 country:[
19 { id: "7",fieldName: "德國",fieldTableName: "德國",distributors:'YODEL',selected: false},
20 { id: "8",fieldName: "瑞士",fieldTableName: "瑞士",distributors:'DPD',selected: false}]
21 }
22 ],
23 ischeckAll:false,//一級全選狀態

因為此處是三級復選，所以函數為三個change，具體有詳細注釋可以查看

 1 handleCheckAllChange(e){//一級change事件
 2 this.ischeckAll=e
 3 if(e==true){
 4 this.indeterminate=false
 5 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //二級全選反選不確定
 6 this.distributorsInfo[i].selected=e
 7 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
 8 this.distributorsInfo[i].country[j].selected=e
 9 }
10 }
11 }else{
12 this.indeterminate=false
13 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //三級全選反選不確定
14 this.distributorsInfo[i].selected=e
15 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
16 this.distributorsInfo[i].country[j].selected=e
17 }
18 }
19 }
20 },
21 handleCheckedCountryAllChange(index, topId, e){//二級change事件
22 this.distributorsInfo[index].selected=e//二級勾選后，子級全部勾選或者取消
23 if(e==false) this.distributorsInfo[index].indeterminate=false //去掉二級不確定狀態
24 var childrenArray=this.distributorsInfo[index].country
25 if(childrenArray)
26 for(var i=0,len=childrenArray.length; i<len; i++)
27 childrenArray[i].selected=e
28 
29 this.getIsCheckAll()
30 },
31 handleCheckedCountryChange(topIndex, sonId, topId, e){//三級change事件
32 var childrenArray=this.distributorsInfo[topIndex].country
33 var tickCount=0, unTickCount=0, len=childrenArray.length
34 for(var i=0; i < len; i++){
35 if(sonId==childrenArray[i].id) childrenArray[i].selected=e
36 if(childrenArray[i].selected==true) tickCount++
37 if(childrenArray[i].selected==false) unTickCount++
38 }
39 if(tickCount==len) {//三級級全勾選
40 this.distributorsInfo[topIndex].selected=true 
41 this.distributorsInfo[topIndex].indeterminate=false
42 } else if(unTickCount==len) {//三級級全不勾選
43 this.distributorsInfo[topIndex].selected=false 
44 this.distributorsInfo[topIndex].indeterminate=false
45 } else {
46 this.distributorsInfo[topIndex].selected=false
47 this.distributorsInfo[topIndex].indeterminate=true //添加二級不確定狀態
48 }
49 
50 this.getIsCheckAll()
51 },
52 getIsCheckAll(){
53 var tickCount=0, unTickCount=0, ArrLength=this.distributorsInfo.length
54 for(var j=0; j<ArrLength; j++){//全選checkbox狀態
55 if(this.distributorsInfo[j].selected==true) tickCount++
56 if(this.distributorsInfo[j].selected==false) unTickCount++
57 }
58 if(tickCount==ArrLength) {//二級全勾選
59 this.ischeckAll=true
60 this.indeterminate=false
61 } else if(unTickCount==ArrLength) {//二級全不勾選
62 this.ischeckAll=false
63 this.indeterminate=false
64 } else {
65 this.ischeckAll=false
66 this.indeterminate=true //添加一級不確定狀態
67 }
68 },

以下是頁面完整組件代碼可以使用預覽

 1 <template>
 2 <div class="deliverySetting">
 3 <div class="deliverySetting-btn">
 4 <div class="tabs-btn ac">
 5 <input type="button" value="分配派送商" @click="showSetDistributorDailog">
 6 </div>
 7 <div class="tabs-btn ac">
 8 <input type="button" value="取消分配" @click="showCancelDistributorDailog">
 9 </div>
 10 </div>
 11 
 12 <div class="deliverySetting-table">
 13 <div class="table-head">
 14 <div class="selection">
 15 <el-checkbox :indeterminate="indeterminate" v-model="ischeckAll" @change="handleCheckAllChange"></el-checkbox>
 16 </div>
 17 <div class="width185">分區名稱</div>
 18 <div class="width265">國家</div>
 19 <div>派送商</div>
 20 </div>
 21 <div class="table-body" v-for="(partition,partitionIndex) in distributorsInfo" :key="partitionIndex">
 22 <div class="selection">
 23 <p><el-checkbox :indeterminate="partition.indeterminate" v-model="partition.selected" @change="handleCheckedCountryAllChange(partitionIndex,partition.partitionId,$event)" :key="partitionIndex"></el-checkbox></p>
 24 </div>
 25 <div class="width185"><p>{{ partition.partitionName }}</p></div>
 26 <div class="width265">
 27 <el-checkbox v-for="country in partition.country" v-model="country.selected" @change="handleCheckedCountryChange(partitionIndex,country.id,partition.partitionId,$event)" :label="country" :key="country.id">{{country.fieldName}}</el-checkbox>
 28 </div>
 29 <div>
 30 <p v-for="(item,index) in partition.country" :key="index">
 31 {{ item.distributors }}
 32 </p>
 33 </div>
 34 </div>
 35 </div>
 36 
 37 <!-- 分配派送商dailog -->
 38 <el-dialog title="分配派送商" :visible.sync="setDistributorDailog" width="480px">
 39 <el-form :model="distributorForm" :rules="rules" class="setDistributorDailog">
 40 <el-form-item label="派送代理商" label-width="120px">
 41 <el-input v-model="distributorForm.vendorName" auto-complete="off" placeholder="請輸入供應商名稱"></el-input>
 42 </el-form-item>
 43 <el-form-item label="末端派送商" prop="senderName" label-width="120px">
 44 <el-select v-model="distributorForm.senderName"
 45 filterable
 46 allow-create
 47 default-first-option
 48 placeholder="請選派送商名稱">
 49 <el-option label="派送商1" value="shanghai"></el-option>
 50 <el-option label="派送商2" value="beijing"></el-option>
 51 </el-select>
 52 </el-form-item>
 53 <el-form-item label="派送商官網" prop="website" label-width="120px">
 54 <el-input v-model="distributorForm.website" auto-complete="off" placeholder="請輸入派送商官網"></el-input>
 55 </el-form-item>
 56 </el-form>
 57 <div slot="footer" class="dialog-footer">
 58 <el-button @click="setDistributorDailog=false">取 消</el-button>
 59 <el-button type="primary" @click="setDistributorDailog=false">確 定</el-button>
 60 </div>
 61 </el-dialog>
 62 
 63 <!-- 取消分配派送商 -->
 64 <el-dialog title="停止提示" :visible.sync="cancelDistributorDailog" :modal="false" width="480px" custom-class="stop-coupon-dialog">
 65 <p><br></p>
 66 <p class="ac f16">您確定要取消對的派送分配嗎？</p>
 67 <p><br></p>
 68 <span slot="footer" class="dialog-footer">
 69 <el-button @click="cancelDistributorDailog=false">取 消</el-button>
 70 <el-button type="primary" @click="cancelDistributorDailog=false">確 定</el-button>
 71 </span>
 72 </el-dialog>
 73 </div>
 74 </template>
 75 <script>
 76 export default {
 77 name:'deliverySetting',
 78 components: {
 79 },
 80 props:{
 81 },
 82 data() {
 83 return {
 84 distributorsInfo:[
 85 { partitionName:'1區',selected:false,partitionId:1,isIndeterminate:false,
 86 country:[
 87 { id: "1",fieldName: "奧地利",fieldTableName: "奧地利",distributors:'UPS',selected: false},
 88 { id: "2",fieldName: "芬蘭",fieldTableName: "芬蘭",distributors:'UPS',selected: false},
 89 { id: "3",fieldName: "意大利",fieldTableName: "意大利",distributors:'UPS',selected: false},
 90 { id: "4",fieldName: "葡萄牙",fieldTableName: "葡萄牙",distributors:'UPS',selected: false},
 91 { id: "9",fieldName: "西班牙",fieldTableName: "西班牙",distributors:'UPS',selected: false},
 92 { id: "10",fieldName: "瑞典",fieldTableName: "瑞典",distributors:'UPS',selected: false},]
 93 },
 94 { partitionName:'2區',selected:false,partitionId:2,isIndeterminate:false,
 95 country:[
 96 { id: "5",fieldName: "丹麥",fieldTableName: "單買",distributors:'',selected: false},
 97 { id: "6",fieldName: "法國",fieldTableName: "法國",distributors:'',selected: false},]
 98 },
 99 { partitionName:'3區',selected:false,partitionId:3,isIndeterminate:false,
100 country:[
101 { id: "7",fieldName: "德國",fieldTableName: "德國",distributors:'YODEL',selected: false},
102 { id: "8",fieldName: "瑞士",fieldTableName: "瑞士",distributors:'DPD',selected: false}]
103 }
104 ],
105 ischeckAll:false,//一級全選狀態
106 setDistributorDailog:false,
107 cancelDistributorDailog:false,
108 distributorForm:{
109 vendorName:'',
110 senderName:''
111 },
112 indeterminate:false,
113 rules: {
114 senderName: [{ required: true, message: '字段不能為空',trigger: 'blur'}],
115 website: [{ required: true, message: '字段不能為空',trigger: 'blur'}],
116 },
117 }
118 },
119 computed: {
120 },
121 methods: {
122 handleCheckAllChange(e){//一級change事件
123 this.ischeckAll=e
124 if(e==true){
125 this.indeterminate=false
126 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //二級全選反選不確定
127 this.distributorsInfo[i].selected=e
128 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
129 this.distributorsInfo[i].country[j].selected=e
130 }
131 }
132 }else{
133 this.indeterminate=false
134 for(var i=0,len=this.distributorsInfo.length; i<len; i++){ //三級全選反選不確定
135 this.distributorsInfo[i].selected=e
136 for(var j=0,len1=this.distributorsInfo[i].country.length; j<len1; j++){
137 this.distributorsInfo[i].country[j].selected=e
138 }
139 }
140 }
141 },
142 handleCheckedCountryAllChange(index, topId, e){//二級change事件
143 this.distributorsInfo[index].selected=e//二級勾選后，子級全部勾選或者取消
144 if(e==false) this.distributorsInfo[index].indeterminate=false //去掉二級不確定狀態
145 var childrenArray=this.distributorsInfo[index].country
146 if(childrenArray)
147 for(var i=0,len=childrenArray.length; i<len; i++)
148 childrenArray[i].selected=e
149 
150 this.getIsCheckAll()
151 },
152 handleCheckedCountryChange(topIndex, sonId, topId, e){//三級change事件
153 var childrenArray=this.distributorsInfo[topIndex].country
154 var tickCount=0, unTickCount=0, len=childrenArray.length
155 for(var i=0; i < len; i++){
156 if(sonId==childrenArray[i].id) childrenArray[i].selected=e
157 if(childrenArray[i].selected==true) tickCount++
158 if(childrenArray[i].selected==false) unTickCount++
159 }
160 if(tickCount==len) {//三級級全勾選
161 this.distributorsInfo[topIndex].selected=true 
162 this.distributorsInfo[topIndex].indeterminate=false
163 } else if(unTickCount==len) {//三級級全不勾選
164 this.distributorsInfo[topIndex].selected=false 
165 this.distributorsInfo[topIndex].indeterminate=false
166 } else {
167 this.distributorsInfo[topIndex].selected=false
168 this.distributorsInfo[topIndex].indeterminate=true //添加二級不確定狀態
169 }
170 
171 this.getIsCheckAll()
172 },
173 getIsCheckAll(){
174 var tickCount=0, unTickCount=0, ArrLength=this.distributorsInfo.length
175 for(var j=0; j<ArrLength; j++){//全選checkbox狀態
176 if(this.distributorsInfo[j].selected==true) tickCount++
177 if(this.distributorsInfo[j].selected==false) unTickCount++
178 }
179 if(tickCount==ArrLength) {//二級全勾選
180 this.ischeckAll=true
181 this.indeterminate=false
182 } else if(unTickCount==ArrLength) {//二級全不勾選
183 this.ischeckAll=false
184 this.indeterminate=false
185 } else {
186 this.ischeckAll=false
187 this.indeterminate=true //添加一級不確定狀態
188 }
189 },
190 
191 showSetDistributorDailog(){
192 this.setDistributorDailog=true
193 },
194 showCancelDistributorDailog(){
195 this.cancelDistributorDailog=true
196 }
197 },
198 created: function() {
199 },
200 mounted: function() {
201 // (async()=> {
202 },
203 watch: {
204 }
205 }
206 </script>
207 <style lang="scss">
208 .deliverySetting{
209 padding: 20px 0;
210 position: relative;
211 .el-table{
212 thead{
213 tr{
214 th{
215 font-size: 14px;
216 }
217 }
218 }
219 tbody{
220 tr{
221 td{
222 vertical-align: baseline;
223 p{
224 line-height: 30px;
225 }
226 .el-checkbox-group{
227 display: flex;
228 flex-direction: column;
229 label{
230 line-height: 30px;
231 margin-left: 0;
232 }
233 }
234 }
235 }
236 }
237 }
238 .deliverySetting-table{
239 font-size: 14px;
240 color: #333;
241 .table-head,
242 .table-body{
243 display: flex;
244 padding: 10px 0;
245 .selection{
246 width: 45px;
247 text-align: center;
248 line-height: 36px;
249 }
250 .width185{
251 width: 185px;
252 }
253 .width265{
254 width: 265px;
255 }
256 }
257 .table-head{
258 height: 36px;
259 align-items: center;
260 background-color: #E7F2FF;
261 }
262 .table-body{
263 border-bottom: 1px solid #e4e4e4;
264 color: #666;
265 &:hover{
266 background-color: #f5f7fa;
267 }
268 .width265{
269 display: flex;
270 flex-direction: column;
271 label{
272 line-height: 30px;
273 margin-left: 0;
274 color: #666;
275 }
276 }
277 p{
278 line-height: 30px;
279 }
280 }
281 }
282 .deliverySetting-btn{
283 /*width: 100%;*/
284 height: 59px;
285 display: flex;
286 justify-content: flex-end;
287 align-items: center;
288 position: absolute;
289 top: -55px;
290 right: -16px;
291 z-index: 100;
292 .tabs-btn {
293 min-width: 90px;
294 height: 34px;
295 line-height: 32px;
296 padding: 0 10px;
297 color: #2387f7;
298 border: solid 1px #4fa2ff;
299 background-color: #e7f2ff;
300 cursor: pointer;
301 &:nth-of-type(2) {
302 margin: 0 15px;
303 }
304 input {
305 border: none;
306 background: transparent;
307 color: inherit;
308 cursor: inherit;
309 outline: none;
310 margin: 0;
311 padding: 0;
312 }
313 &:hover {
314 color: #fff;
315 background-color: #2387f7;
316 }
317 }
318 }
319 .setDistributorDailog{
320 .el-input{
321 width: 270px;
322 }
323 }
324 }
325 </style>
View Code

好了，以后使用三級甚至多級復選都可以使用此方法添加change代碼即可。

對前端的技術，架構技術感興趣的同學關注我的頭條號，并在后臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！！

在線咨詢

上一篇：將鼠標移動到div元素上，查看過渡效果
下一篇：Java 開發的 10 大必備 Eclipse 插件

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

web前端基礎教程 用layui獲取checkbox

言

checkbox

具體組成

代碼組成

結束語

ue基于t-ui的三級CheckBox復選框elemen

您的項目需求

web前端基礎教程用layui獲取checkbox