jQ-多选按钮实现单选按钮的功能以及input按钮的优化
2024-08-31 15:09:24
css:
.displayN{display: none;}
label {font-size:12px;cursor:pointer;}
label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;}
input[type="checkbox"],input[type="radio"] {display:none;}
input[type="radio"] + i {border-radius:7px;}
input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;}
input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;}
input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;}
.mOD_maskInput{width: 1.0714rem;height: 1.0714rem;border-radius: 50%;}
.mOD_maskWhy label i{display:inline-block;width: 1.0714rem;height: 1.0714rem;border-radius: 50%;text-align:center;line-height:1.0714rem;color:#fff;vertical-align:middle;border: #c3c3c3 1px solid;}
.mOD_maskRect{width: 0.57rem;height: 0.57rem;border-radius: 50%;margin: 0.25rem auto 0;}
.mOD_maskInput[type="checkbox"]:checked+i span{background: #33adee!important;}
html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择框样式</title>
</head>
<body>
<label><input type="checkbox"><i>✓</i>复选框</label><br>
<label><input type="checkbox" checked><i>✓</i>复选框</label><br>
<label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>
<label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br> <label><input type="radio" name="abc"><i>✓</i>单选框</label><br>
<label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br> <label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>
<label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>
<section class="mOD_maskCon posAb backW">
<aside class="mOD_maskTitle txtCenter color33"></aside>
<aside class="mOD_maskWhy font857">我不想买了<label class="fr"><input class="mOD_maskInput displayN" type="checkbox" name="abc"><i><span class="displayB mOD_maskRect"></span></i>哈哈哈哈</label></aside>
</section>
<label><input type="checkbox" name="checkbox1"><i>✓</i>复选框</label><br>
<label><input type="checkbox" name="checkbox1"><i>✓</i>复选框</label><br>
<label><input type="checkbox" name="checkbox1"><i>✓</i>复选框</label><br>
<label><input type="checkbox" name="checkbox1"><i>✓</i>复选框</label><br>
<label><input type="checkbox" name="checkbox1"><i>✓</i>复选框</label><br>
<label><input type="checkbox" name="checkbox1"><i>✓</i>复选框</label><br>
<label><input type="checkbox" name="checkbox1"><i>✓</i>复选框</label><br>
<label><input type="checkbox" name="checkbox1"><i>✓</i>复选框</label><br>
<!--
用i标签代替input标签，具体把input标签隐藏，设置i标签的样式。具体图标可放在i的里面，点击时利用input的伪类:checked+i>..{}改变点击时的状态。
-->
</body>
</html>
js:
<script src="../js/jquery.js"></script>
<script>
$(function(){
$(function(){
$("input[type='checkbox']").click(function(){
if($(this).is(':checked') != undefined) {//判断当前复选框是否被选中，因为如果复选框没有被选中attr()函数的返回值是undefined，如果选中的话返回值checked。
//alert(0);
$(this).parent("label").siblings().find("input").attr("checked",false);
$(this).attr("checked",true);
}
});
});
});
</script>
最新文章
- ubuntu系统(华硕笔记本)屏幕亮度用Fn控制的调节设置
- 【iCore3 双核心板_ uC/OS-III】例程七：信号量——任务同步
- C语言异常处理和连接数据库
- ACM题目————A除以B
- Scrum Meeting---Eleven(2015-11-6)
- Bugtags，产品经理的瑞士军刀
- chrome浏览器测试js函数
- phpcms新增栏目字段_phpcms添加栏目属性
- 【开源框架EGOTableViewPullRefresh的研究】
- DLX 舞蹈链 精确覆盖 与 重复覆盖
- MFC学习之CWinApp类
- 黄金K线理论简述
- Linux记录-sftp上传大文件
- Android 滑动定位+吸附悬停效果实现
- vue中使用scss
- 位运算卷积-FWT
- STL_函数对象01
- 如鹏网学习笔记（十）DOM
- centos 7 install gnome etc
- 在GitHub搭建个人博客 地址: https://douzujun.github.io/