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

您所在的位置：网站首页 › jq单选框 › jq控制单选多选，实现选中样式为图片

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

2023-09-05 15:42| 来源: 网络整理| 查看: 265

HTML的checkbox设置选中样式为图片比较麻烦所以写了一个jq的控制代码如下： html：

//第一个默认选中第一个第二个第三个

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

【本文地址】

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

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

今日新闻

推荐新闻