插件描述：纯CSS美化 单复选框，不用任何插件
更新时间：2018/8/31 9:36:53
更新说明：
未选中状态优化
新增不可用状态
新增选中不可用状态
1. 把input隐藏
2. 美化label,
3. label 包一个圆形开关
4. input状态为checked 改变label 的背景
5. 最重要的 input: checked + label， 选择邻近的标签， 改变样式
PREVIOUS:
NEXT:
相关插件-选择框
讨论这个项目（20）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
＆ 0
2021/6/22 17:48:16
-
出现label 和选择框分离的情况如何解决
Thinkbird0
2021/6/22 17:53:13
-
需要邻近，+ 就是邻近选择器
＆0
2021/6/23 17:43:15
-
什么意思？？我是后台传参数回来再加载复选框 我直接打开的时候有时候会出现label和框分离出去的情况
Thinkbird1
2021/6/27 17:07:44
-
input 和 label一定要放在一起，+ 就是邻近选择器，不然就不会起作用
<input/><img/><label>这样就没有作用了，img 才是它的邻近标签
天际线 0
2020/5/8 16:53:37
-
大佬!请问怎么获取选中的哪一个呢
魏朝琴1
2021/1/14 20:42:30
$("input[name='category']:checkbox").click(function() { //我给input加了name属性
let res = '';
$('.res_name').remove(); //移除之前添加的标签内容，只留最后一次循环的
$("input[name='category']:checkbox").each(function() {
if ($(this).prop('checked')) {
res += $(this).next().text() + ","; //获取点击的文本内容以“，”分隔开
}
});
$("<input type='hidden' class='res_name' name='category_name'/>").val(res).appendTo('#myform'); //#myform是我form表单的id
})
//后台通过name=category_name的input获取值。这就是用户选择的值
古城深巷旧少年 0
2019/9/25 11:01:51
为什么我添加了 name属性 就默认不选中了
<input type="checkbox" checked value='01' name='filter_media' id="filter_media2" the-id="title_checkbox1"> <label for="filter_media2">新闻</label>
Thinkbird0
2019/9/25 11:04:04
-
你下载最原始的代码，拿来改下试试
唔昂汪、么一凹喵 0
2018/9/3 16:21:41
-
你好。。请问这种方式怎么获取是选中还是取消
Thinkbird1
2018/9/3 21:57:45
-
html 怎么写就是怎么样的，不依赖任何js
checked 就是选中的，disabled 就是禁用的
?眼檩眼 0
2018/8/31 10:01:50
-
兼容性怎么样
Thinkbird0
2018/8/31 10:02:36
-
兼容CSS3 的IE 9及 以上浏览器即可
?眼檩眼0
2018/8/31 10:04:53
-
能兼容到IE9 手机端也能用 低版本ie 没测
?眼檩眼0
2018/8/31 10:05:36
-
低版本 安卓 写错了
Thinkbird0
2018/8/31 15:05:20
-
多个Andorid 设备测试没有问题，你也可以试试
😃
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
😃
取消回复
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
