用jquery修改默认的单选框radio或者复选框checkbox选择框样式

默认的radio和checkbox选框很难看。我去看了一下qq注册的页面。发现单选和复选框并没有用<input>,居然是用是A标签。然后用css背景图片展示选择框，用JavaScript控制切换。然后我自己用jqeury写了一个这样功能的。

先是html代码

性别

<div id="box-6">　　 <label>性别</label> <a href="#" name="male" id="sex-1" class="sex-checked-fouse">男</a><a href="#" name="femail" id="sex-2" class="sex-nocheck">女</a>
</div>

爱好

<div id="box-8"><label>兴趣爱好</label><a href="javascript:;" id="hobby-1" class="hobby-nocheck">运动</a><a href="#" id="hobby-2" class="hobby-nocheck">科学</a><a href="#" id="hobby-3" class="hobby-nocheck">读书</a>
</div>

jquery代码

<script src="js/jquery.js" type="text/javascript"></script><script type="text/javascript">$(function() {var i = 0;var obj;/*性别*/$("#sex-1").click(function() {/*获取性别男选择框*/if($("#sex-2").has("sex-checked-fouse")){/*如果女被选中*/$("#sex-2").removeClass("sex-checked-fouse").addClass("sex-nocheck");/*移除女焦点样式（焦点样式就是选中图片）。并且添加未选中样式（就是未选中图片）*/$("#sex-1").removeClass("sex-nocheck").addClass("sex-checked-fouse");/*移除男未选中样式，添加焦点样式*/}})$("#sex-2").click(function() {/*获取性别女选择框*/if($("#sex-1").has("sex-checked-fouse")){/*如果男被选中*/$("#sex-1").removeClass("sex-checked-fouse").addClass("sex-nocheck");/*与上同理*/$("#sex-2").removeClass("sex-nocheck").addClass("sex-checked-fouse");}})/*兴趣*/$("#hobby-1,#hobby-2,#hobby-3").click(function() {hobby(this);/*调用hobby方法并传参*/})function hobby(obj) {// 这是控制兴趣选择框的方法hobbyvar _this = obj;/*获取元素并赋值*/if($(_this).hasClass("hobby-nocheck")){$(_this).removeClass("hobby-nocheck").addClass("hobby-checked-fouse");}else {$(_this).removeClass("hobby-checked-fouse").addClass("hobby-nocheck");}}})

</script>

效果↓（多选选择框是我自己p,有点难看--）

转载于:https://www.cnblogs.com/lijinwen/p/5574154.html

用jquery修改默认的单选框radio或者复选框checkbox选择框样式相关推荐

[Ext JS] 3.5 单选框 Radio与复选框CheckBox
Radio 与Checkbox Radio 单选框,意思是当有一组同名的单选框时,一次只能选择一个.有单选框,也就有复选框(checkbox),对应的复选框就可以选择多个. Radio 和 Check ...
html表单设置单选框,html如何实现表单的选择框效果？单选框与多选框的实现（代码实例）...
在使用表单提交数据的时候,为了减少用户的一些操作,使用选择框是一个好主意.本章给大家介绍html如何实现表单的选择框效果?单选框与复选框的实现(代码实例).通过单选框代码和复选框代码实例,实现单选框样 ...
使用easyui框架form控件，单选按钮radio或复选框checkbox样式问题
为什么80%的码农都做不了架构师?>>> easyui只提供了textbox文本框,未提供单选按钮radio或复选框checkbox控件,在使用过程中,会存在单选按钮radio ...
html5 多选框控件,复选框和单选框都属于控件吗
单选框和复选框的区别是什么? 单选框和复选框的区别是什么? 详细一点-. (1)复选框可以允许你选择多个设置,而单选框则允许你选择一个设置: 这两个选框的区别是一个通过用圆圈表示,一个通过用方框表示. ...
Vue ElementUI 实现 Table 多列数据 checkBox选择框
日期选择器日期范围选择器设置默认时间值注意事项 value-format="yyyy-MM-dd hh:mm:ss" 格式化日期选择器 value值格式 :default-t ...
复选框html语言,复选框的checked属性
javascript如何控制input的checked属性由于我不懂JS语言,只能尽量描述,问题应该比较菜,还望看到的朋友能够 var radiovar = document.getElements ...
组合框里添加复选框的方法
组合框可以看作是列表框和文本框的组合,因其占据的空间少,使用操作方便,常被界面设计人员用于界面开发设计中,在有限个输入的条件下,组合框常用来代替文本框,这样从用户使用角度来看,更趋人性化,所见即所得. ...
WebBuilder中知识点：批量操作、combo、radio、复选框控件的使用
一.WebBuilder中对grad列表设置复选框按钮如图:,实现方法:在grad属性里面设置selType属性为checkboxmodel,multiSelect也最好设置为true.设置完之后, ...
在 jquery repeater 中添加设置日期,下拉,复选框等控件
JQueryElement 更新到了 3.5.1, 今天给大家主要讲下如何在 Repeater 的模板中添加设置一些控件. 由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, ...

用jquery修改默认的单选框radio或者复选框checkbox选择框样式

用jquery修改默认的单选框radio或者复选框checkbox选择框样式相关推荐

最新文章

热门文章