資訊專欄INFORMATION COLUMN
摘要：多選如果已經(jīng)選中了，那就取消選中，如果沒(méi)有，則選中接下來(lái)我們寫一下全選，全取消，反選的實(shí)現(xiàn)。
單選
當(dāng)我們用v-for渲染一組數(shù)據(jù)的時(shí)候，我們可以帶上index以便區(qū)分他們我們這里利用這個(gè)index來(lái)簡(jiǎn)單地實(shí)現(xiàn)單選
首選定義一個(gè)selectedNum,當(dāng)我們點(diǎn)擊item時(shí)，便把這個(gè)selectedNum更改為我們所點(diǎn)擊的item的index，然后每個(gè)item上加入判斷selectedNum是不是等于自己，如果等于則選中。
相當(dāng)于每個(gè)人有一個(gè)編號(hào)，鼠標(biāo)點(diǎn)擊生成了一個(gè)中獎(jiǎng)號(hào)碼，然后每個(gè)人自己去判斷這個(gè)中獎(jiǎng)號(hào)碼是不是自己，如果是自己，哇，不得了~
代碼如下：
data() {
return {
selectedNum:"",
radioList: ["某個(gè)元素", "某個(gè)元素", "某個(gè)元素", "某個(gè)元素", "某個(gè)元素"],
};
},
methods: {
//單選
select(i) {
this.selectedNum = i;
},
}
多選
多選的原理和單選一樣，只不過(guò)這次我們要維護(hù)的是一個(gè)數(shù)組，不是單個(gè)的selectedNum
同樣是利用index~同樣是選中獎(jiǎng)的人，不過(guò)這次中獎(jiǎng)的人很多，我們點(diǎn)擊一次就有一個(gè)人中獎(jiǎng)，如果這個(gè)人的index出現(xiàn)在我們的中獎(jiǎng)名單checkbox上，那他就是天選之人了~
寫成代碼就是點(diǎn)擊一次push一次index到checkbox中，如果這個(gè)checkbox中有這個(gè)index了那就不要它了，實(shí)現(xiàn)了點(diǎn)一次選中再點(diǎn)一次取消。
//多選
check(i){
var idx = this.checkbox.indexOf(i);
//如果已經(jīng)選中了，那就取消選中，如果沒(méi)有，則選中
if(idx>-1){
this.checkbox.splice(idx,1);
}else{
this.checkbox.push(i);
}
},
接下來(lái)我們寫一下全選，全取消，反選的實(shí)現(xiàn)。
//選中全部
checkAll(){
//中獎(jiǎng)的人就這么多，而且他們的index都是0到length-1的（v-for渲染），一頓數(shù)組基本操作即可
var len = this.checkboxList.length;
this.checkbox = [];
for(var i=0;i-1){
this.checkbox.splice(idx,1);
}else{
this.checkbox.push(i);
}
}
}
很多時(shí)候 全選 和 全部取消 只要一個(gè)按鈕實(shí)現(xiàn)，這樣我們就需要來(lái)判斷它是不是已經(jīng)全部選滿了。在computed中自動(dòng)計(jì)算是否全選。
computed: {
//判斷是否全部選中
isCheckAll(){
if(this.checkbox.length==this.checkboxList.length){
return true;
}
return false;
}
},
然后我們只需要給這個(gè)雙功能按鈕綁定一個(gè)這樣的功能即可
letsGetThisFuckingCheck(){
//如果全選，就是清空選擇；如果不是，那就全都安排一下
if(this.isCheckAll){
this.clearCheckbox();
}else{
this.checkAll()
}
},
展示
上gif演示圖（假裝這個(gè)是gif，其實(shí)你們能想象的出來(lái)什么效果的吧）
完整代碼單選框
- {{item}}
多選框
- {{item}}
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97548.html
摘要：代碼部分全選操作編輯刪除姓名年齡性別愛(ài)好保存新增部分姓名年齡性別愛(ài)好小花小軍小坤小新您確定要保存修改嗎感興趣的，可以給顆小心心或者一個(gè)大拇指 代碼： HTML部分 .warp{ width: 900px; padding: 20px; margin: 0 auto; } .gr...
摘要：當(dāng)勾選全選按鈕旁邊的復(fù)選框時(shí)，列表中的選項(xiàng)全部選中，反之取消勾選則列表中的選項(xiàng)全部為未選中狀態(tài)。全選或全不選全選全不選反選設(shè)置全選復(fù)選框獲取選中選項(xiàng)的值選項(xiàng)總個(gè)數(shù)全選不全選HTML 我們的頁(yè)面上有一個(gè)歌曲列表，列出多行歌曲名稱，并匹配復(fù)選框供用戶選擇，并且在列表下方有一排操作按鈕。 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 1.時(shí)間都去哪兒了 ...
摘要：原始實(shí)現(xiàn)全選全不選全選項(xiàng)項(xiàng)項(xiàng)項(xiàng)改進(jìn)全選只能在里面聲明，因?yàn)?，才?huì)變化 原始 jQuery實(shí)現(xiàn)CheckBox全選、全不選 $(function() { $(#checkAll).click(function() { $(input[name=subBox]).attr(checked,this.checked); }); ...
摘要：最近在看廖雪峰的教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項(xiàng)的，然后通過(guò)邏輯代碼實(shí)現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...
摘要：最近在看廖雪峰的教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下首先要獲取到全選和每一項(xiàng)的，然后通過(guò)邏輯代碼實(shí)現(xiàn)題目要求。 最近在看廖雪峰的Jquery教程，事件篇的練習(xí)題比較綜合，研究了很久終于研究出來(lái)了，現(xiàn)在分享出來(lái)，提供給小白學(xué)習(xí)。題目如下： showImg(https://segmentfault.com/img/bV7pGr?w=...
閱讀 2910·2021-11-11 10:58
閱讀 1958·2021-10-11 10:59
閱讀 3520·2019-08-29 16:23
閱讀 2363·2019-08-29 11:11
閱讀 2812·2019-08-28 17:59
閱讀 3882·2019-08-27 10:56
閱讀 2114·2019-08-23 18:37
閱讀 3139·2019-08-23 16:53
