怎么修改单选框radio默认样式

转载 2015年11月21日 13:34:50

怎么修改单选框radio默认样式

苏生不惑苏生不惑 5.6k 2014年05月27日 提问
  •  1 关注
  •  3 收藏,27.4k 浏览
0

默认radio的样式为:

怎么改为图片替代,并能获取选中的值

3 个回答

1
采纳
StephenLee 5.7k 2014年05月27日 回答 · 2014年05月28日 更新

苏生兄你标签选的 jQuery,那么我就用 jQuery 尝试实现下这个效果,因为 jQuery 学得不深,因此不一定是最佳方案,背景图直接从网上找到。:)
先把 HTML 码好:

<div>
  <input type="radio" id="nba" checked="checked" name="sport" value="nba">
  <label name="nba" class="checked" for="nba">NBA</label>
  <input type="radio" id="cba" name="sport" value="cba">
  <label name="cba" for="cba">CBA</label>
</div>

接着是 CSS:

input[type="radio"] {
  margin: 3px 3px 0px 5px;
  display: none;
}
label {
  padding-left: 20px;
  cursor: pointer;
  background: url(bg.gif) no-repeat left top;
}
label.checked {
  background-position: left bottom;
}

再就是 jQuery 代码了:

$(function() {
  $('label').click(function(){
    var radioId = $(this).attr('name');
    $('label').removeAttr('class') && $(this).attr('class', 'checked');
    $('input[type="radio"]').removeAttr('checked') && $('#' + radioId).attr('checked', 'checked');
  });
});

相关文章推荐

[原创首发] js手机移动端选择插件 mobileSelect.js

mobileSelect.js一款多功能的手机移动端选择组件,支持单选到多选、支持多级级联、提供自定义回调函数、提供update函数二次渲染、重定位函数、兼容pc端拖拽等等。mobileSelect....

Mobiscroll的介绍【一款兼容PC和移动设备的滑动插件】

Mobiscroll是一个用于触摸设备的日期和时间选择器,它的使用不会改变HTML5、PhoneGap以及混合应用的原生用户体验。作为一款jQuery日期插件,用户可以自定义主题样式,为自己的移动项目...
  • shimiso
  • shimiso
  • 2015年11月11日 16:00
  • 21464

怎么修改单选框radio默认样式

div> input type="radio" id="nba" checked="checked" name="sport" value="nba"> label name="nba" cl...

html修改默认单选框样式

  • 2017年03月17日 10:31
  • 3KB
  • 下载

一款单选框radio样式

.radio-btn { width: 20px; height: 20px; display: inline-block; ...
  • vuturn
  • vuturn
  • 2015年12月10日 09:57
  • 2316

radio单选框checkbox复选框新样式 更改原生样式 toggle toggleClass hasClass

白片 蜡块 .sendType { background: url(../img/uncheck.png) no-repeat; background-position: 0px 12p...

(翻译)第十回 JavaFX2.0单选框Radio Button

原文地址http://download.oracle.com/javafx/2.0/ui_controls/radio-button.htm#BABBJBDA   RadioButton类...

Ajax中根据json数据不同,对页面上的单选框Radio进行回显

Ajax中根据json数据不同,对页面上的单选框Radio进行回显 js代码: $(document).ready(function(){ $.ajax({ type: "...

Struts2中的ognl标签介绍(property标签、iterator标签、if/elseif/else标签、url标签、url标签、radio单选框、select下拉选择框)

Struts2中的ognl标签介绍(property标签、iterator标签、if/elseif/else标签、url标签、url标签、radio单选框、select下拉选择框) proper...

Form表单之radio单选框操作

input单选框,name相同的单选项为同一单选组: 1.选中某值的项: input单选1组: radio单选项1 radio单选项2 $("input:radio[name='radio1'][va...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:怎么修改单选框radio默认样式
举报原因:
原因补充:

(最多只允许输入30个字)