用图片制作radio单选按钮_radio加入图片-CSDN博客

本文介绍如何利用HTML、CSS和JavaScript，通过设置透明背景图片来实现自定义的radio单选按钮效果。通过CSS调整图片位置和大小，JavaScript处理点击事件以切换选中和未选中状态。

用图片制作radio单选按钮

找两张背景透明的图片作为“未选中”和“选中”状态的单选按钮：

定义一个单选按钮组：

<div class="rds">
    性别：
    <label><input name="r1" type="radio" value="男">男</label>
    <label><input name="r1" type="radio" value="女">女</label>
    <label class="checked"><input name="r1" type="radio" checked value="保密">保密</label>
</div>

为它设置CSS样式：

把图片设置为<label>标签的背景图
把单选按钮设置为“隐藏”状态

<style>
.rds{
    font-size: 16px;
}
.rds input{
    display: none;
}
.rds label{
    background: url("img/radio_off.png") no-repeat 0 3px/18px;
    margin-right: 25px;
    padding-left: 20px;
}
.rds label.checked{
    background: url("img/radio_on.png") no-repeat 0 3px/18px;
}
</style>

这样，带有 class=“checked” 属性的<label>标签呈现为选中状态，不带该属性的呈现为未选中状态。
background 属性的值依次为：图片地址不铺排 x坐标 y坐标/图片宽度
其中的x坐标、y坐标、图片宽度可用来微调图片的位置和大小。

为各个单选按钮绑定 click 事件，单击时切换各按钮呈现的图片：

<script>
var rs = document.getElementsByName("r1"); //获取单选按钮组
for(var i in rs){
    rs[i].onclick = function () { //绑定click事件
        var lab = this.parentNode; //获取label标签
        var labs = lab.parentNode.childNodes; //获取同组的所有label标签
        for(var j in labs){
            labs[j].className = ""; //修改为未选中
        }
        lab.className = "checked"; //当前label修改为选中
    }
}
</script>