一组普通多选全选反选--选中效果用的是图片

最新推荐文章于 2023-09-19 10:19:42 发布

dongsdh

最新推荐文章于 2023-09-19 10:19:42 发布

阅读量306

点赞数

分类专栏：表单处理

本文链接：https://blog.csdn.net/dongsdh/article/details/89632924

版权

表单处理专栏收录该内容

17 篇文章 1 订阅

订阅专栏

前言：多选全选反选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript" src="jquery2.min.js" ></script>
        <style type="text/css">
        	input{
        		visibility: hidden;
        	}
        	input+label{
        		display: inline-block;
			     width: 14px;
			     height: 14px;
			     background: url('isno.png') no-repeat;
			     background-size: 100% 100%;
        	}
        	input:checked+label{
        		background: url('isyes.png') no-repeat;
			     background-size: 100% 100%;
        	}
        </style>
    </head>
    <body>全量筛选
    	<span>
    		<input class="act" onclick="check()" name="a" type="checkbox" id="check1" value="1"/>
			<label for="check1"></label>  		
    	</span>
    	<label for="check1">未派单</label>  		
    	<span>
    		<input class="act" onclick="check()" name="a" type="checkbox" id="check2" value="2"/>
			<label for="check2"></label>  		
    	</span>
    	<label for="check2">处理中</label>  		
    	<span>
    		<input class="act" onclick="checkall()"  name="a" type="checkbox" id="all" />
			<label for="all" for="check1"></label>  		
    	</span>
    	<label for="all" for="check1">全选</label>  		
        <script>
        	var valarr1=[];
        	function check() {
        		valarr1=[];
			    //通过标签选择器选择所有的被选择中的除全选按钮的CheckBox
			    var array = $("input[type='checkbox']:checked:not('#all')");
			    //选择除全选框外的所有复选框
			    var arrayAll = $("input[type='checkbox']:not('#all')");
			    if(array.length == arrayAll.length){
			        //两个数组的长度相等,那么就将全选框选中
			        $("#all").attr("checked",true);
			    }else{
			        //两个数组的长度相等,那么就将全选框的checked属性设置为false
			        $("#all").removeAttr("checked",false);
			    }
			    $("input[type=checkbox]:checked:not('#all')").each(function (){
			    	if($(this).hasClass('act')){
			    		var val = $(this).val();
			    		valarr1.push(val)
			    	}
			    })
			    console.log(valarr1);
			}
        	function checkall() {
        		valarr1=[];
			    //通过对全选按钮的状态进行判断
			    var bool = $("#all").attr("checked");
			    if(bool){
			        //如果全选按钮是选中的那么就将除全选框外所有的CheckBox选中
			        $("input[type='checkbox']:not('#all')").attr("checked",true);
			    }else{
			        //如果全选按钮是选中的那么就将除全选框外所有的CheckBox选中
			        $("input[type='checkbox']:not('#all')").attr("checked",false);
			    }
				$("input[type=checkbox]:checked:not('#all')").each(function (){
			    	if($(this).hasClass('act')){
			    		var val = $(this).val();
			    		valarr1.push(val)
			    	}
			    })
			    console.log(valarr1);
			}
        </script>

    </body>
</html>

选中or未选中

效果

dongsdh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一组普通多选全选反选--选中效果用的是图片

前言：多选全选反选<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="jquery2.min.js...
复制链接

扫一扫