HTML的checkbox設定選中樣式為圖片比較麻煩 所以寫了一個jq的控制 程式碼如下： html：

    <div class="line   big_select">
        <span class="select fl default" > </span>//第一個預設選中
        <div class="message fl">第一個</div>
    </div>
	<div class="line  big_select">
        <span class="select fl  "
 
 > </span>
        <div class="message fl">第二個</div>
    </div>
    <div class="line   big_select">
        <span class="select fl " > </span>
        <div class="message fl">第三個</div>
    </div>

css:

.line {/*行設定*/
    height: 1.9rem;
    background:
 
 white;
    line-height: 1.9rem;//行內字上下居中
    border-bottom: 1px solid #f6f6f6;//每行底部加上分割線
}

.message {/*行內字*/
    font-size: 0.7rem;
    margin-left: 1rem;
    color: #363636;
}
.selected {
    background: url(../img/correct.png);//選中背景圖片，途徑放入url中
    background-size: cover;//覆蓋未選中
}

.select {//未選中圓圈由div構成
    display:
 
 inline-block;
    width: 1.1rem;//設定選中圓圈大小
    height: 1.1rem;//
    border-radius: 50%;//設為圓圈
    border: 0.1rem solid #EEE9E9;//加上圓圈外線
    margin-top: 0.4rem;
}
.fl{
	float:left;
}

js:

//選中設定
  $(".select").on('click',function(){
    if(!$(this).is('.selected')){
      $(this).addClass('selected')
    }
    else{
      $(this).removeClass('selected')
    }
  })
  $(".default").addClass('selected') //設定預設選中
  
// 如果需要單選則再加上以下程式碼 
$(".select").on('click',function(){
    $(".select").removeClass("selected")
    $(this).addClass("selected")
})

效果如圖: 總結： 這樣可以實現單選和多選，但是隻能點選選中圈才能實現，對使用者體驗不友好，後面改進了一下，擴大了點選的焦點 修改的js程式碼如下：

            $(".big_select").on('click', function() { // 選中部分js
                if (!$($(this).children(".select")).is('.selected')) {
                    $($(this).children(".select")).addClass('selected');
                } else {
                    $($(this).children(".select")).removeClass('selected');
                }
            })
            $(".big_select").on('click', function() { // 控制單選
                $(".select").removeClass("selected")
                $($(this).children(".select")).addClass("selected")
            })
            

將點選範圍從span小圈擴大到了span外一個div，在這裡是一整行 通過$(this).children(".select")來替代原來的this $(this).children(".select")：獲取當前元素下class為select的子元素