單選框、複選框點擊添加相應樣式（自定義背景圖片）

圖片是雪碧圖（未選中，選中，鼠標移上去的樣式）

css:

.billSelectIpt {
    font-size:14px;
    color:rgba(51,51,51,1);
}

.billSelectIpt input[type='radio']+label {
    margin: 4px 5px -2px 0;
    background: url(../images/billRadioIcons.png) 0 0 no-repeat;
    cursor: pointer;
    padding-left: 23px;
    height: 14px;
}
.billSelectIpt input[type='radio']:hover+label {
    background: url(../images/billRadioIcons.png) 0 -24px no-repeat;
    color: #298EF8;
}
.billSelectIpt input[type='radio']:checked:hover+label {
    background: url(../images/billRadioIcons.png) 0 -48px no-repeat;
    color: #298EF8;
}
.billTicketChecked {
    color: #298EF8;
}
.billTicketChecked label{
    background: url(../images/billRadioIcons.png) 0 -48px no-repeat!important;
}

.billSelectIpt input[type='checkbox']+label {
    margin: 4px 5px -2px 0;
    background: url(../images/billCheckboxIcons.png) 0 0 no-repeat;
    cursor: pointer;
    padding-left: 23px;
    height: 14px;
}

.billSelectIpt input[type='checkbox']+label span {
    position: relative;
    top: -4px;
}

.billSelectIpt input[type='checkbox']:hover+label {
    background: url(../images/billCheckboxIcons.png) 0 -24px no-repeat;
    color: #298EF8;
}
.billSelectIpt input[type='checkbox']:checked:hover+label {
    background: url(../images/billCheckboxIcons.png) 0 -48px no-repeat;
    color: #298EF8;
}

.billTicketMuchChecked {
    color: #298EF8;
}
.billTicketMuchChecked label{
    background: url(../images/billCheckboxIcons.png) 0 -48px no-repeat!important;
}

html:

<div class="billShoppingDiv commonClear">
    <div class="color969 font16 fl">承兌類型：</div>
         <div class="billSelectIptCon fl">
             <div class="billSelectIpt" :class="[isNoWay01 ? 'billTicketChecked':'']" @click="clearAllBillType">
                 <input type="radio" name="check" class="none" id="billAll"><label class="fl" for="billAll"></label>不限
             </div>
             <div class="fl" id="billTypeDiv" >
                 <div class="billSelectIpt"v-for="(item,index) in billTypeList"  @click="clearBillType($event,item)">
                     <input type="checkbox" name="check" class="none" :id="'billType0'+index"><label class="fl" :for="'billType0'+index"><span>{{item}}</span></label>
                 </div>
             </div>
         </div>
     </div>
<div class="billShoppingDiv commonClear">
    <div class="color969 font16 fl">票面金額：</div>
    <div class="billSelectIptCon fl" id="billTicketDiv">
        <div class="billSelectIpt" v-for="(item,index) in billMoneyList" @click="clearBillMoney(index,item)" :class="{ billTicketChecked:index==currentBillMoneyIndex}">
             <input type="radio" name="check"  :id="'billTicket0'+index" class="none" >
             <label class="fl" :for="'billTicket0'+index"></label>{{item}}
         </div>
    </div>
</div>

js:

data:

billTypeList:[ "國股", "城商", "村鎮", "三農", "財司", "外資", "商票"],

 billMoneyList:["不限", "10萬以下", "10萬(含)-50", "50(含)-100萬", "100萬及以上"],

currentBillMoneyIndex

isNoWay01

 

methods:

// 承兌行類型:不限
clearAllBillType:function(){
    this.isNoWay01 = true;
    $("#billTypeDiv .billSelectIpt").removeClass("billTicketMuchChecked");
    $("#billTypeDiv .billSelectIpt input[name='check']").prop("checked",false);
   //數據對接 this.billTermPo.acceptorType.splice(0,this.billTermPo.acceptorType.length);
    //this.listenDate(1);
},
//承兌行類型選擇：
clearBillType:function(event,item){
    this.isNoWay01 = false;
    if(event.target.checked){
        event.currentTarget.classList.add("billTicketMuchChecked");
        //數據對接this.billTermPo.acceptorType.push(item);
        //this.listenDate(1);
    }else {
        event.currentTarget.classList.remove("billTicketMuchChecked");
        //數據對接this.removeByValue(this.billTermPo.acceptorType,item);
    }

},

//票面金額選擇：
clearBillMoney:function(index,item){
    this.currentBillMoneyIndex = index;
    //數據對接this.billTermPo.capitalGrade = item;
    //this.listenDate(1);
},

removeByValue:function (arr, val) {
    for(var i=0; i<arr.length; i++) {
        if(arr[i] == val) {
            arr.splice(i, 1);
            break;
        }
    }
},