标签：checked 多选 自定义 border height 单选 span input type

 

使用vue语言

 

 这是多选

<div class="div-checked">

     <label v-for="it in AreaData" :key="it.id">
           <input type="checkbox" @change="choseYW" name="pageIdList" value="被选择内容" />
           <span>展示内容</span>
           <span class="i"></span>
     </label>

     <label v-for="it in AreaData" :key="it.id">
           <input type="checkbox" @change="choseYW" name="pageIdList" value="被选择内容" />
           <span>展示内容</span>
           <span class="i"></span>
     </label>

</div>

多选数据处理

choseYW(val, e) {       var obj = document.getElementsByName("pageIdList");       const check_val = [];       for (var k in obj) {         if (obj[k].checked) check_val.push(obj[k].value);       }       // this.ruleForm.pageIdList = check_val.join(",");  这是获取的字符串格式       this.ruleForm.pageIdList = check_val   //这是数组格式 },

这是单选

<div class="div-checked">
              <label>
                <input type="radio" v-model="ruleForm.type" value="文章" />
                <span class="type1">文章</span>
                <span class="i"></span>
              </label>
              <label>
                <input type="radio" v-model="ruleForm.type" value="课程" />
                <span class="type2">课程</span>
                <span class="i"></span>
              </label>
              <label>
                <input type="radio" v-model="ruleForm.type" value="直播" />
                <span class="type3">直播</span>
                <span class="i"></span>
              </label>
              <label>
                <input type="radio" v-model="ruleForm.type" value="4" />
                <span>
                  <input class="type4" v-model="tag" style="width:100%;height:40px;border:0;text-align:center"/>
                </span>
                <span class="i"></span>
              </label>
</div>

样式如下：

.div-checked label {
  cursor: pointer;
  position: relative;
  display: inline-block;
  width: 120px;
  height:40px;
  border: 1px solid grey;
  // box-shadow: 0 0 10px #ccc;
  margin: 10px 8px;
  line-height: 40px;
  text-align: center;

  input[type="checkbox"],input[type="radio"] {
    opacity: 0;
  }
  input[type="checkbox"]:checked span ,input[type="radio"]:checked span{
    border-color: #006bc9;
    color: #006bc9;
  }
  span {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 40px;
  }
  input[type="checkbox"]:checked + span + .i:after,input[type="radio"]:checked + span + .i:after {
    opacity: 1;
    content: "";
    position: absolute;
    top: 5px;
    right: 20px;
    display: inline-block;
    width: 12px;
    height:7px;
    background: transparent;
    border:1.5px solid #fff;
    border-bottom: none;
    border-left: none;
    -webkit-transform: rotate(130deg);
    -moz-transform: rotate(130deg);
    -o-transform: rotate(130deg);
    -ms-transform: rotate(135deg);
    transform: rotate(130deg);
    // z-index: 99999;
  }
  input[type="checkbox"]:checked + span + .i:after,input[type="radio"]:checked + span + .i:after {
    top:-25px;
    right:1px;
  }
  input[type="checkbox"]:checked + span + .i ,input[type="radio"]:checked + span + .i{
    width: 0px;
    height: 0px;
    border-color: #006bc9 transparent;
    color: #006bc9;
    border-width:25px 0px 0px 25px;
    border-style: solid;
    position: absolute;
    right: 0rem;
    top: 0rem;
    opacity: 1;
  }
  .type1{background: #c7f481;}
  .type2{background: #81fffe;}
  .type3{background: #f6c48b;}
  .type4{background: #03adef;}
}

 

 

 

标签：checked,多选,自定义,border,height,单选,span,input,type
来源： https://www.cnblogs.com/zhanghailing/p/13036149.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。