使用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>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>
多选数据处理
这是单选
<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;} }