0

默认radio的样式为:
radio
怎么改为图片替代,并能获取选中的值

苏生不惑 18.1k
2014-05-27 提问
5 个回答
3

已采纳

苏生兄你标签选的 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');
  });
});

效果如下:

请输入图片描述

点击 CBA 后:

请输入图片描述

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

请输入图片描述

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

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

含有checked属性的选择器可以直接:checked

Humphry · 2014年05月28日

1
回复 StephenLee

https://github.com/jquery/jquery/blob/master/src/sizzle/dist/sizzle.js 188行起就是sizzle如何结合DOM实现选择器。

Humphry · 2014年05月28日

展开评论
2

@bill 的答案也是目前我项目里正在用的方案,自定义radio及checkbox的样式。
可以用纯css实现样式而不需要图片。
详细见这里
修改radio和checkbox的默认样式

0

使用CSS3的写法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
            <title>
                Document
            </title>
        </meta>
        <style media="screen" type="text/css">
            .button{
                padding: 5px 10px;
                background-color: #AEAEAE;
                cursor: pointer;
            }

            .radio > input[type=radio]:checked ~ .button{
                background-color: #4F4;
            }

            .radio > input[type=radio]{
                display: none;
            }
        </style>
    </head>
    <body>
        <label class="radio">
            <input name="r" type="radio" value="a"/>
            <span class="button">A</span>
        </label>
        <label class="radio">
            <input name="r" type="radio" value="b"/>
            <span class="button">B</span>
        </label>
    </body>
</html>
0

直接用css3 兄弟选择器就能搞定,用什么js

该答案已被忽略,原因:

撰写答案

推广链接