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

本文介绍了一种利用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")
            })
            

将点击范围从span小圈扩大到了span外一个div,在这里是一整行
通过$(this).children(".select")来替代原来的this
$(this).children(".select"):获取当前元素下class为select的子元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值