html radio 默认图片替换_怎么修改单选框radio默认样式

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

先把 HTML 码好：

NBA

CBA

接着是 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')