Jquery模拟单选按钮与多选按钮
来源:互联网 发布:软件开发业务介绍 编辑:程序博客网 时间:2024/05/02 01:22
我们都知道原生的单选与多选按钮样式不能通过CSS来改变,然后还有更加让人不爽的是在不同浏览器下他们的样式也会有很大的差异。
估计很多人都和我一样遇到过,设计师提供效果图中的单选按钮与多选按钮都不是像原生的那样,然而设计要求我们必须做出跟他们效果图上面一样的。
这个时候我们只能通过JS来模拟了。
下面是HTML代码:
<span style="font-family: Arial, Helvetica, sans-serif;"></span><pre name="code" class="html"><!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title></head><body> <h4>1.请选择您的性别</h4> <div class="radio-box radio-cur" name="sex"> <label></label> <span>男</span> <input type="radio" name="sex" class="fn-hide" /> </div> <div class="radio-box" name="sex"> <label></label> <span>女</span> <input type="radio" name="sex" class="fn-hide" /> </div> <div class="radio-box" name="sex"> <label></label> <span>不男不女?</span> <input type="radio" name="sex" class="fn-hide" /> </div> <h4>2.请选择您喜欢的球星</h4> <div class="check-box check-cur"> <label></label> <span>科比</span> <input type="checkbox" name="" class="fn-hide" checked /> </div> <div class="check-box"> <label></label> <span>韦德</span> <input type="checkbox" name="" class="fn-hide" /> </div> <div class="check-box"> <label></label> <span>维斯布鲁克</span> <input type="checkbox" name="" class="fn-hide" /> </div> <div class="check-box"> <label></label> <span>库里</span> <input type="checkbox" name="" class="fn-hide" /> </div> <div class="check-box"> <label></label> <span>杜兰特</span> <input type="checkbox" name="" class="fn-hide" /> </div> <div class="check-box"> <label></label> <span>安东尼</span> <input type="checkbox" name="" class="fn-hide" /> </div> <div class="check-box"> <label></label> <span>戴维斯</span> <input type="checkbox" name="" class="fn-hide" /> </div> <div class="check-box"> <label></label> <span>詹姆斯</span> <input type="checkbox" name="" class="fn-hide" /> </div></body></html>
然后CSS代码:
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"></span><pre name="code" class="css">* { margin:0; padding:0;}h4 { margin-top:20px;}body { margin-left:30px;}.fn-hide { display:none;}.radio-box, .check-box { display:block; margin:10px; cursor: pointer;}.radio-box label { float:left; width:12px; height:12px; margin:2px 5px 2px 8px; border:#0e5 2px solid; border-radius:50%; cursor: pointer; /* 用背景替代边框 */ }.check-box label { float:left; width:10px; height:10px; margin:2px 6px 2px 9px; border:#000 2px solid; cursor: pointer;}.radio-cur label, .check-cur label { border:#f00 2px solid;}
最后是JavaScript代码:
/*注:name属性值相同的元素只能一个被选中;*/ $(function(){ // 通过click事件来模拟单选按钮 $(document).on("click", ".radio-box", function(){ // 获取单选按钮的name属性值; var objName = $(this).attr("name"); // 删除被选中元素和高亮样式radio-cur; $(".radio-box[name='"+objName+"']").removeClass("radio-cur"); // 为点击的元素添加高亮样式; $(this).addClass("radio-cur").find("input[type='radio']").prop("checked", true); }); // 通过click事件来模拟多选按钮; $(document).on("click", ".check-box", function(){ // 判断该元素被选中与否并返回与之对应的样式; return $(this).hasClass("check-cur") ? $(this).removeClass("check-cur").find("input[type='checkbox']").prop("checked",false) : $(this).addClass("check-cur").find("input[type='checkbox']").prop("checked",true); });});
0 0
- Jquery模拟单选按钮与多选按钮
- jQuery控制单选与复选按钮
- JQuery 单选按钮和多选按钮状态判断
- jquery实现单选按钮选中与取消选中
- 单选按钮与字体
- Span模拟单选按钮Radio
- 单选按钮、多选按钮
- JQuery操作单选按钮以及复选按钮
- 单选按钮&复选按钮
- jquery 对单选按钮遍历选择
- Jquery单选按钮的赋值
- jquery单选按钮组选中
- 【jQuery】:radio单选按钮选择器
- jquery 获取单选按钮的值
- 用 jquery 操作 radio单选按钮
- Jquery操作radio单选按钮
- 单选按钮与复选按钮的相互转换
- 单选按钮RadioGroup与RadioButton实例
- json使用时需要导入的包
- 一个项目经历的CheckList 。。。。。。。。。
- 黑马程序员-java中的String
- windows下安装jira6.04,汉化,破解
- 3.14 Simplify Path
- Jquery模拟单选按钮与多选按钮
- 佳澜祛斑美白免洗面膜
- MySQL多表查询
- 求购java web开发框架
- .tar.bz2文件解压命令
- 基于wait和notify的生产者消费者实例
- 佳澜祛斑美白面膜
- 四维空间解密
- ios8 UITableView设置 setSeparatorInset:UIEdgeInsetsZero不起作用的解决办法