radio点击事件修改样式

时间 2020-03-22 标签 radio 点击事件修改样式

上一篇个性化了checkbox，这一篇搞一下radio。css

效果图：

代码：

test.htmlhtml

<!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.jsjquery

$(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.cssios

/* 用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;
}

新手上路，请多关照。web