select 2级联动和checkbox全选框联动

分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识,造福人民,实现我们中华民族伟大复兴!

               
项目中用到的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>

           

给我老师的人工智能教程打call!http://blog.csdn.net/jiangjunshow

这里写图片描述

猜你喜欢

转载自blog.csdn.net/qq_43682438/article/details/84034212