jq控制单选多选，实现选中样式为图片

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的子元素