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

最新推荐文章于 2022-07-20 23:20:46 发布

我叫阿狸猫

最新推荐文章于 2022-07-20 23:20:46 发布

阅读量3.8k

点赞数 1

分类专栏：看视频文章标签： jquery jQuery

本文链接：https://blog.csdn.net/world_java/article/details/8155217

版权

看视频专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!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个选项都选中,点击第五个选项的时候,全选选项就会被选中

我叫阿狸猫

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
利用jQuery完成全部选中,只要一个没选中全选按钮就不选中功能

test.html --> 选项1 选项2 选项3 选项4 选项5 全选 $("document").ready(function(){ $("input:eq(5)").click(function(){ if($(this).attr("checke
复制链接

扫一扫

专栏目录