select 2级联动和checkbox全选框联动_级联 checkbox-优快云博客

本文链接：https://blog.youkuaiyun.com/liuzijiang1123/article/details/52343310

该博客介绍了如何在HTML页面中实现二级联动选择框和复选框全选功能。通过jQuery实现当主选项改变时，显示或隐藏对应的副选项，以及复选框全选时，所有子项被选中，反之则取消全选。同时，提供了搜索功能，根据主选项的值获取并输出相关副选项的值。

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

项目中用到的2个小函数，代码中的搜索是将option的值获取，方便我后面进行传输，checkbox的全选框联动中亮点在于其他复选框的数量不等于当前被选中的数量时，全选框checked属性设置为false，其实真正联动起来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
 #sel1 {
 margin:8px;
border:1px solid #cbd7e0; 
outline: none; 
padding-left: 8px; 
font-family: "Microsoft Yahei"; 
font-size: 12px; 
color: #333333;
width:50%;
}

.sub{
margin:8px;
border:1px solid #cbd7e0; 
outline: none; 
padding-left: 10px; 
font-family: "Microsoft Yahei"; 
font-size: 12px; 
color: #333333;
width:50%;
}

</style>
</head>
<body>
	<div class="log">
	<label>主选项</label>
    <select id="sel1">
        <option value="1">1</option>
        <option value="2">2</option>
    </select>
	</div>
	<div class="log2">
	<label>副选项</label>
    <select id="sub1">
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
	</div>
	<div class="log3" style="display:none">
	<label>副选项</label>
    <select id="sub2">
        <option value="5">5</option>
        <option value="6">6</option>
    </select>
	</div>
	<input type="button" value="搜索" onclick="search();">
	<input type="checkbox" value=1 class="items"/>
	<input type="checkbox" value=2 class="items"/>
	<input type="checkbox" id="checkall" />全选
	
    <script type="text/javascript">
		function selectAll(){
			$(".items").attr("checked",$("#checkall").attr("checked"));
			alert($("#checkall").attr("checked"));
		}
		
        $(function(){
            $("#sel1").change(function(){
			var a=$(this).val();
			//console.log(a);
                   if(a==1)
			{
			$(".log2").show();
			$(".log3").hide();
     			   }
			   else{
			  $(".log3").show();
			  $(".log2").hide();
		         }   
            });
			
			$("#checkall").click(function(){
				$(".items").attr("checked",$("#checkall").attr("checked"));//这里最好把attr改成prop，不然会出现一点小bug，对于自身的属性最好用prop，对于自定义的最好用attr，下面也是一样的。(出现过问题，所以这里需要注意一下)
			})
			$(".items").click(function(){
				$("#checkall").attr("checked",$(".items").length==$(".items").filter(":checked").length);
			})
           
        });
		
		function search(){
			console.log($("#sel1").val());
			var a=$("#sel1").val();
			if(a==1)
			{
			console.log($("#sub1").val());
			}
			else{
			console.log($("#sub2").val());
			}
		}
    </script>
</body>
</html>