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

<div>
  <input type="radio" id="nba" checked="checked" name="sport" value="nba">
  <label name="nba" class="checked" for="nba">NBAlabel>
  <input type="radio" id="cba" name="sport" value="cba">
  <label name="cba" for="cba">CBAlabel>
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');
  });
});

效果如下:

点击 CBA 后:

背景图 bg.gif 一并上传如下:

刚看到你的问题中还有一个取得选中的单选按钮的值,这个不难取得:

$('input[type="radio"]:checked').attr('value')

你可能感兴趣的:(css,css3,html,js,jquery,内联元素html标签,radio怎么改,radio)