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

最新推荐文章于 2024-06-20 15:11:50 发布

原创最新推荐文章于 2024-06-20 15:11:50 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种利用jQuery和CSS技巧，优化HTML checkbox样式的方法，实现自定义选中图片和扩大点击区域，提高用户体验。文章详细展示了如何通过jQuery监听click事件，控制checkbox的选中状态，并附带代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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")
            })