上一篇个性化了checkbox,这一篇搞一下radio。
效果图:
代码:
test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="radio.css" />
</head>
<body>
<div>
<div class="radiodiv">
<div class="radiostatus">
<input id="input" type="radio" name="sex" value="1" checked="checked" />
<span>女</span>
<div class="label"></div>
</div>
</div>
<div class="radiodiv">
<div class="radiostatus">
<input id="input" type="radio" name="sex" value="0" />
<span>男</span>
<div class="label"></div>
</div>
</div>
</div>
</body>
<script src="jquery-3.4.1.js"></script>
<script src="radio.js"></script>
<!-- radio点击事件修改样式 -->
</html>
tip:需要用到jquery,注意导入。
radio.js
$(function() {
//activeRadio();
activeRadioBySelector("",alertValue);
});
/* 激活所有的的radiodiv*/
function activeRadio() {
//初始化选中状态
$(".radiodiv").each(function() {
var checked = $(this).find("input").prop("checked");
if (checked) {
$(this).find(".radiostatus").addClass("checked");
} else {
$(this).find(".radiostatus").removeClass("checked");
}
})
//初始化按钮事件
$(".radiodiv").on("click", function() {
var checked = $(this).find("input").prop("checked");
var name=$(this).find("input").attr("name");
if (checked) {
$(this).find("input").prop("checked", false)
$(this).find(".radiostatus").removeClass("checked");
} else {
$(this).find("input").prop("checked", true)
$(this).find(".radiostatus").addClass("checked");
//如果点击的元素变成了选中,其他元素变成未选中.
$(this).siblings().find("input[name='"+name+"']").prop("checked", false);
$(this).siblings().find(".radiostatus").removeClass("checked");
}
})
}
/* 只激活某块地区的radio,避免影响其他.*/
function activeRadioBySelector(selector,callback) {
//当selector为""时,也是激活所有的地区.
var selector=selector+' .radiodiv';
//初始化选中状态
$(selector).each(function() {
var checked = $(this).find("input").prop("checked");
if (checked) {
$(this).find(".radiostatus").addClass("checked");
} else {
$(this).find(".radiostatus").removeClass("checked");
}
})
//初始化按钮事件
$(selector).on("click", function() {
var checked = $(this).find("input").prop("checked");
var name=$(this).find("input").attr("name");
if (checked) {
$(this).find("input").prop("checked", false)
$(this).find(".radiostatus").removeClass("checked");
callback(this);
} else {
$(this).find("input").prop("checked", true)
$(this).find(".radiostatus").addClass("checked");
//如果点击的元素变成了选中,其他元素变成未选中.
$(this).siblings().find("input[name='"+name+"']").prop("checked", false);
$(this).siblings().find(".radiostatus").removeClass("checked");
callback(this);
}
})
}
function alertValue(that){
var checked = $(that).find("input").prop("checked");
var name=$(that).find("input").attr("name");
if (checked) {
var value=$(that).find("span").text();
alert("当前选中"+value);
}else{
//如果点击的元素变成了未选中,其他元素变成选中.
//之所以将这个代码放在个性化区域的原因是:
//它适合只有2个按钮的时候.如果3个按钮,将其他元素选中的逻辑是不符合常理的.
//如果三个按钮,最好删除下面两行代码
$(that).siblings().find("input[name='"+name+"']").prop("checked", true);
$(that).siblings().find(".radiostatus").addClass("checked");
var value=$(that).siblings().find("input[name='"+name+"']:checked").parent().find("span").text();
alert("当前选中"+value);
}
}
tip:这里提供了两种方法,如果没有其他事件用第一种;如果有自定义事件,用第二种即可(第二种需要注意注释)
radio.css
/* 用div包装 */
.radiodiv {
display: inline-block;
position: relative;
margin-left: 28px;
margin-bottom: 50px;
}
/* 隐藏原来的样式 */
.radiodiv input[type=radio] {
visibility: hidden;
}
/* 定义边框样式 */
.radiodiv .label {
display: block;
width: 20px;
height: 20px;
line-height: 20px;
cursor: pointer;
position: absolute;
border: 1px solid #ccc;
border-radius: 50%;
top: 6px;
left: 6px;
}
.radiodiv span{
display: inline-block;
margin-left: 5px;
margin-top: 5px;
}
/* 定义选中样式(使用伪元素)*/
.radiodiv .checked div:before {
display: block;
content: "\2022";
text-align: center;
font-size: 25px;
line-height: 17px;
color: red;
}
新手上路,请多关照。