利用jQuery完成全部选中,只要一个没选中全选按钮就不选中功能

来源：互联网发布：五音不全唱歌的软件编辑：程序博客网时间：2024/05/17 22:45

<!DOCTYPE html><html>  <head>    <title>test.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->    <script type="text/jscript" src="../js/jquery-1.8.2.js"></script>  </head>    <body>   <input type="checkbox" name="test1" value="check1">选项1   <input type="checkbox" name="test2" value="check2">选项2   <input type="checkbox" name="test3" value="check3">选项3   <input type="checkbox" name="test4" value="check4">选项4   <input type="checkbox" name="test5" value="check5">选项5<br><input type="checkbox" name="checkAll" value="checkAll">全选  </body>  <script type="text/javascript">  $("document").ready(function(){$("input:eq(5)").click(function(){if($(this).attr("checked")=="checked"){$("input[value!=checkAll]").each(function(){$(this).attr("checked","checked");});}else{$("input[value!=checkAll]").each(function(){$(this).attr("checked",null);});}});$("input[value!=checkAll]").each(function(){$(this).click(function(){if($(this).attr("checked")=="checked"){var len=0;$("input[value!=checkAll]").each(function(){if($(this).attr("checked")=="checked"){len++;}});if(len==5){$("input[value=checkAll]").attr("checked","checked");}}else{$("input[value=checkAll]").attr("checked",null);}});});});  </script></html>

只要点击全部选中,所有选项都被选中
只要有一个选项没选中,全部选中选项就不被选中
当4个选项都选中,点击第五个选项的时候,全选选项就会被选中