jquery实现单选与多选

最新推荐文章于 2024-06-11 10:54:21 发布

锋小张

最新推荐文章于 2024-06-11 10:54:21 发布

阅读量1.5w

点赞数 5

分类专栏：前端技术分享文章标签： radio checkbox 单选多选

本文链接：https://blog.csdn.net/fengfeng_zhan/article/details/78969863

版权

前端技术分享专栏收录该内容

18 篇文章 3 订阅

订阅专栏

前言

相信做前端的小伙伴们，多多少少都会遇到关于单选或者多选的问题，选择框大家也都不会陌生，无非就是radio和chechkbox，

但是input的这两个属性都无法更改默认样式，有时候无法满足Ui设计出的高大上，真逼格的选择框样式，这时候就需要label标签来帮忙了。将label与input绑定一起来实现各种各样的优美选择框。将样式图片设置为label标签的背景即可，点击当前的input，更改与之绑定的label的样式。上代码

单选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		.choose_radio{
			display:block;
			float:left;
			width:20px;
			height:20px;
			border:1px solid #ccc;
			border-radius:2px;
		}
		.choose_radioed{
			display:block;
			float:left;
			width:22px;
			height:22px;
			border-radius:2px;
			background:url(fang_choose.png) no-repeat;
			background-size:100%;
		}
		p{
			float:left;
			margin:0;
		}
		</style>
	</head>
	<script src="jquery-2.1.4.min.js"></script>
	<body>
		
		<div>
			<p class="title_p">单选:</p></br>
			<label for="choose_1" class="input_label choose_radio ">
				<input id="choose_1" type="radio" name="single" class="single_input" autocomplete ="off"/>
			</label>
			<p class="yijia_title_p">选项1</p>
			<label for="choose_2" class="input_label choose_radio">
				<input id="choose_2" type="radio" name="single" class="single_input" autocomplete ="off"/>
			</label>
			<p class="yijia_title_p">选项2</p>
			<label for="choose_3" class="input_label choose_radio">
				<input id="choose_3" type="radio" name="single" class="single_input" autocomplete ="off"/>
			</label>
			<p class="yijia_title_p">选项3</p>
		</div>
	</body>
	<script>
		$(".single_input").on("click",function(){
			var par_label = $(this).parent();
			if(this.checked){
            	$(".input_label").removeClass("choose_radioed").addClass("choose_radio");
            	par_label.removeClass("choose_radio").addClass("choose_radioed");
            }else{
            }
		});
	</script>
</html>

效果图：

多选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
		.choose_check{
			display:block;
			float:left;
			width:20px;
			height:20px;
			border:1px solid #ccc;
			border-radius:2px;
		}
		.choose_checked{
			display:block;
			float:left;
			width:22px;
			height:22px;
			border-radius:2px;
			background:url(fang_choose.png) no-repeat;
			background-size:100%;
		}
		.choose_input{
			display:none;
		}
		p{
			float:left;
			margin:0;
		}
		</style>
	</head>
	<script src="jquery-2.1.4.min.js"></script>
	<body>
		
		<div class="address_choose_div">
			<p class="title">多选:</p>
			
			<label for="chooseAll" class="choose_label choose_check">
				<input id="chooseAll" type="checkbox" name="chooseAll" class="choose_input" autocomplete ="off"/>
			</label>
			<p class="choose_title">全选</p></br>
			<label for="choose_1" class="choose_label choose_check">
				<input id="choose_1" type="checkbox" name="choose" class="choose_input" autocomplete ="off"/>
			</label>
			<p class="choose_title">选项1</p>
			<label for="choose_2" class="choose_label choose_check">
				<input id="choose_2" type="checkbox" name="choose" class="choose_input" autocomplete ="off"/>
			</label>
			<p class="choose_title">选项2</p>
			<label for="choose_3" class="choose_label choose_check">
				<input id="choose_3" type="checkbox" name="choose" class="choose_input" autocomplete ="off"/>
			</label>
			<p class="choose_title">选项3</p>
		</div>
	</body>
	<script>
		/*全选及取消*/		
		$('input[name="chooseAll"]').click(function(){
			var par_label = $(this).parent();
			if($(this).is(':checked')){  
				par_label.removeClass("choose_check").addClass("choose_checked");
                $('input[name="choose"]').each(function(){  
                    //此处如果用attr，会出现第三次失效的情况  
                    $(this).prop("checked",true);  
                    $(this).parent().removeClass("choose_check").addClass("choose_checked");
                });  
	        }else{
	        	par_label.removeClass("choose_checked").addClass("choose_check");
	        	$('input[name="choose"]').each(function(){  
                    //此处如果用attr，会出现第三次失效的情况  
                    $(this).prop("checked",false);  
                    $(this).parent().removeClass("choose_checked").addClass("choose_check");
                });  
	        }
		});
		
		$('input[name="choose"]').click(function(){
	    	var par_label = $(this).parent();
	    	/*选项总长度*/
	    	var length = $('input[name="choose"]').length;
	    	/*被选中项长度   如果两个长度一样  说明全选*/
	    	var choose_length = $('input[name="choose"]:checked').length;
            if(this.checked){
            	par_label.removeClass("choose_check").addClass("choose_checked");
            	if(length == choose_length){
            		$('input[name="chooseAll"]').prop("checked",true);
            		$('input[name="chooseAll"]').parent().removeClass("choose_check").addClass("choose_checked");
            	}else{
            		$('input[name="chooseAll"]').prop("checked",false);
            		$('input[name="chooseAll"]').parent().removeClass("choose_checked").addClass("choose_check");
            	}
            	
            }else{
            	par_label.removeClass("choose_checked").addClass("choose_check");
            	if(length == choose_length){
            		$('input[name="chooseAll"]').prop("checked",true);
            		$('input[name="chooseAll"]').parent().removeClass("choose_check").addClass("choose_checked");
            	}else{
            		$('input[name="chooseAll"]').prop("checked",false);
            		$('input[name="chooseAll"]').parent().removeClass("choose_checked").addClass("choose_check");
            	}
            }
        });
	</script>
</html>

效果图：

需要注意的是点击事件需要绑定在input上面，切记不可绑定在label上。样式中的图片记得更换哦！

锋小张

关注

5
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
6
评论
jquery实现单选与多选

前言相信做前端的小伙伴们，多多少少都会遇到关于单选或者多选的问题，选择框大家也都不会陌生，无非就是radio和chechkbox，但是input的这两个属性都无法更改默认样式，有时候无法满足Ui设计出的高大上，真逼格的选择框样式，这时候就需要label标签来帮忙了。将label与input绑定一起来实现各种各样的优美选择框。上代码单选 .choose_r
复制链接

扫一扫