vue.js实现复选框选中取消获取选择值

最新推荐文章于 2024-06-10 20:05:20 发布

夏末_阳光依然耀眼

最新推荐文章于 2024-06-10 20:05:20 发布

阅读量1.6k

点赞数 1

分类专栏： vue html5+css3 checkbox

html5+css3 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

vue

15 篇文章 2 订阅

订阅专栏

checkbox

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="css/style.css" type="text/css">
<title>多选</title>
<script src="vue.js" type="text/javascript"></script>
<style>
 ul, li {
  list-style-type: none;
 }
 
 * {
  margin: 0;
  padding: 0;
 }
 
 .border-1px {
  position: relative;
 }
 
 .border-1px:after {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-top: 1px solid rgba(7, 17, 27, .1);
  content: ' ';
 }
 
 @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .border-1px::after {
  -webkit-transform: scaleY(0.7);
  transform: scaleY(0.7);
  }
 }
 
 @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .border-1px ::after {
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  }
 }
 
 #example {
  margin: 20px;
 }
 
 h3 {
  font-size: 26px;
  margin-left: 20px;
  height: 60px;
 }
 
 .self-checkbox {
  display: none;
 }
 
 .self-checkbox + label {
  margin-top: 16px;
  -webkit-appearance: none;
  background-color: #fff;
  border: 2px solid #aaa;
  border-radius: 5px;
  display: inline-block;
  position: relative;
  width: 30px;
  height: 30px;
  box-sizing: border-box;
  vertical-align: top;
 }
 
 .self-checkbox:checked + label {
  border: 2px #47d9bf solid;
 }
 
 .self-checkbox:checked + label:after {
  display: inline-block;
  text-align: center;
  content: '√';
  width: 100%;
  height: 30px;
  line-height: 26px;
  color: #47d9bf;
  font-size: 18px;
  text-shadow: 0px 0px 5px #47d9bf;
 }
 
 .check-area {
  display: inline-block;
  width: 400px;
  padding: 12px 20px;
  border: 1px solid #aaa;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
 }
 
 li {
  height: 60px;
 }
 
 li .self-radio + label {
  vertical-align: middle;
 }
 
 li span {
  margin-left: 20px;
  display: inline-block;
  line-height: 60px;
  font-size: 22px;
 }
 
 p {
  height: 60px;
  line-height: 60px;
  margin-left: 20px;
 }
 
 p span {
  color: #f00;
 }
 
 .btn {
  margin: 20px auto;
  width: 100%;
  text-align: center;
 }
 
 .btn button {
  width: 120px;
  height: 40px;
  line-height: 30px;
  font-size: 16px;
  color: #fff;
  background: #47d9bf;
  border: 1px #23d5b6 solid;
  border-radius: 6px;
  text-align: center;
  outline: none;
 }
 
 .btn button:hover {
  background: #23d5b6;
 }
 </style>
</head>
<body>
<div id="example">
 <h3>多选按钮</h3>
 <div class="check-area" v-show="items.length!=0">
 <ul>
  <li class="border-1px" v-for="(item,index) in items">
    <input class="self-checkbox" type="checkbox" name="radio"
    :id="'checkbox-'+item.id" 
    :data-id="'food-'+item.id"  
    :value="item.value"
    v-model="checkValues"
    @click="setCheckValue($event,item)">
    <label :for="'checkbox-'+item.id"></label>
    <span>{{item.value}}</span>
  </li>
 </ul>
 <p>您选择了：<span v-show="checkValues.length">{{filterCheckValues}}</span></p>
 <div class="btn">
  <button @click="showCheck(checkIds)">按钮</button>
  <span v-show="checkIds.length">{{checkIds}}</span>
 </div>
 </div>
</div>
<script>
 var itemData = [
   {id: '20170811001', value: '香蕉'},
   {id: '20170811002', value: '苹果'},
   {id: '20170811003',value: '梨子'}, 
   {id: '20170811004', value: '葡萄'}
 ]
 //itemData = [];
 var vm = new Vue({
 el: '#example',
 data: {
  items: '',
  checkValues: [],
  checkIds: []
 },
 computed: {
  filterCheckValues: function () {
    var value = this.checkValues;
    var reValue = '';
    for (var i = 0; i < value.length; i++) {
     reValue += value[i] + '、'
    }
    reValue = reValue.substring(0, reValue.length - 1)
    return reValue;
  }
 },
 methods: {
  initData: function () {
    var self = this;
    self.items = itemData;
    if (itemData.length != 0) {
      //   self.checkValues[0] = self.items[0].value;
      //   self.checkIds[0] = 'food-' + self.items[0].id;
    }
  },
  setCheckValue: function (ev, item) {
    var id = 'food-' + item.id;
    if (ev.target.checked) {
     this.checkIds.push(id);
    } else if (this.checkIds.indexOf(id) > -1) {
     this.checkIds.remove(id);
    }
  },  
  showCheck: function () {
    console.log(this.checkIds)
  }
 },
 filter: {},
   mounted: function () {
    this.initData();
   }
 })

 Array.prototype.remove = function (val) {
   var index = this.indexOf(val);
   if (index > -1) {
    this.splice(index, 1);
   }
 }
</script>
</body>
</html>

夏末_阳光依然耀眼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js实现复选框选中取消获取选择值

<!DOCTYPE HTML><html lang="zh-cn"><head><meta http-equiv="Content-type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width,initial-sca...
复制链接

扫一扫