改变radio的样式以及radio组相关操作的jquery插件

最新推荐文章于 2025-06-03 09:11:32 发布

浅脂弱

最新推荐文章于 2025-06-03 09:11:32 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/mozhi111/article/details/78773764

CSS 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种改变radio样式的方法，通过隐藏原始radio并使用图片进行替代。具体实现分为两种策略：一是利用单张图片调整位置，二是通过不同类切换不同图片。示例中采用的是后者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路:1.将原先的radio给隐藏掉,用图片来替代

2.这里替代的图片有两种形式.第一种是一张图片有两个小图,这时候需要改变图片的位置即可第二种,会比第一种简单一些它只是需要用两种类来渲染不同的图片即可 . 这里的例子用的是第二种

效果图:

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<script src="lib/jquery-3.1.1.js"></script>
		<title>Document</title>
		<style>			 
			input[type="radio"]{
				display: none;
			}
			.radio{
				background-image: url(single_nor.png);
				background-repeat: no-repeat;
				background-position: center left;
				padding-left: 20px;
			}
			.radioOn{
				background-image: url(single_sel.png);
				background-repeat: no-repeat;
				background-position: center left;
				padding-left: 20px;
			}			 						 
		</style>
	</head>

	<body>
		<form action="" method="get">
			您最喜欢水果？<br /><br />
			<label ><input name="Fruit" type="radio" class="store-radio" value="" /></label>苹果 
			<label><input name="Fruit" type="radio" class="store-radio"  value="" /></label>桃子 
			<label><input name="Fruit" type="radio" class="store-radio"  value="" /></label>香蕉 
			<label><input name="Fruit" type="radio" class="store-radio" value="" /></label>梨 
			<label><input name="Fruit" type="radio" class="store-radio"  value="" /></label>其它
			<label></label>
		</form>
		<script>
			$(function(){
				//初始化
				$('input[name="Fruit"]').each(function(index,element){
					$(element).parent().addClass("radio");
				});
				//为label注册单击事件
				$('input[name="Fruit"]').each(function(index,element){					
					$(element).parent().click(function(){						
						if($(this).hasClass("radio")){
							//清除兄弟节点中选中节点的选中
							$(this).siblings(".radioOn").each(function(index,element){
								$(element).removeClass("radioOn").addClass("radio");
							});
							//为当前节点选中
							$(this).removeClass("radio").addClass("radioOn");
							return false;
						}
						//为当前节点取消选中
						else if($(this).hasClass("radioOn")){
							$(this).removeClass("radioOn").addClass("radio");
							return false;
						}
					});					
				});				 
			});
		</script>
		
	</body>

</html>

//radio插件 对象为一整个按钮组
; (function () {
	$.fn.extend({
		"storeRadioInit": function () {
			if ($(this).length > 0) {
				$(this).each(function (index, element) {
					$(element).parent().addClass("radio").click(function () {
						if ($(this).hasClass("radio")) {							
							$(this).siblings(".radioOn").each(function (index, element) {
								$(this).children()[0].checked = false;
								$(element).removeClass("radioOn").addClass("radio");
							});							
							$(this).removeClass("radio").addClass("radioOn");
							$(this).children()[0].checked = true;
							return false;
						}							
						else if ($(this).hasClass("radioOn")) {
							$(this).children()[0].checked = false;
							$(this).removeClass("radioOn").addClass("radio");
							return false;
						}
					});
				});

			}
		},
		"getSelectedValue": function () {
			var value = "";
			if ($(this).length > 0) {
				$(this).each(function (index, element) {
					if ($(element).parent().hasClass("radioOn")) {
						value = $(element).val();
						//终止循环   终止本次循环为:return true
						return false;
					}
				});
				//该方法的返回
				return value;
			}
		},
		"setValue": function (value) {
			if ($(this).length > 0) {
				$(this).each(function (index, element) {
					if ($(element).val() == value) {
						$(element).parent().siblings('.radioOn').each(function (index, element) {
							element.checked = false;
							$(element).removeClass('radioOn').addClass('radio');
						});
						$(element).parent().addClass('radioOn');
						element.checked = true;
						return false;
					}
				});
			}
		}
	});
})(jQuery);