jQuery 全选与全不选，反选

1.不带选项框

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>全选全不选1(空白)</title>
	<script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript">
		/* 
		功能需求：
		*/
		$(function(){
			$("#checkedAllBtn").click(function(){
				//①全选按钮：点击后所有爱好都选中       设置的属性值相同
				$("input[name='items']").attr("checked" , true);//隐式迭代
			});
			$("#checkedNoBtn").click(function(){
				//②全不选按钮：点击后所有爱好都不选中
				$("input[name='items']").attr("checked" , false);//隐式迭代
			});
			$("#checkedRevBtn").click(function(){
				//反选按钮：选中变为未选中，未选中变为选中
				$("input[name='items']").each(function(){
					//alert(this.checked);//正在遍历的dom对象
					this.checked = !this.checked;
				});//设置不同的值 无法隐式迭代
			});
			$("#sendBtn").click(function(){
				//④提交按钮：点击后依次弹出选中内容
				//获取选中的复选框
				$("[name='items']:checked").each(function(){
					alert(this.value);
				});
			});
			
		});
		
	</script>
	</head>
	<body>
	
		<form method="post" action="">
		
			熟悉的编程语言是：
			<br />
			<input type="checkbox"  name="items" value="C语言" />C语言
			<input type="checkbox" name="items" value="C++语言" />C++语言
			<input type="checkbox" name="items" value="python语言" />python语言
			<input type="checkbox" name="items" value="Java语言" />Java语言
			<br />
			<input type="button" id="checkedAllBtn" value="全　选" />
			<input type="button" id="checkedNoBtn" value="全不选" />
			<input type="button" id="checkedRevBtn" value="反　选" />
			<input type="button" id="sendBtn" value="提　交" />
		</form>
	
	</body>
</html>

2. 严谨的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>全选全不选1(空白)</title>
    <script type="text/javascript" src="static/js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#checkedAllBtn").click(function () {
                var g = $('#checkedAllBtn').attr("checked");
                if (g == undefined) {
                    $("input[name='items']").attr("checked", false);
                } else {
                    $("input[name='items']").attr("checked", true);//隐式迭代
                }


            });
            var ss = $("input[name='items']").length;

            $("input[name='items']").click(function () {
                var sss = 0;
                sss = $("input[name='items']:checked").length;
                if (ss == sss) {
                    $("#checkedAllBtn").prop("checked", true);
                } else {
                    $("#checkedAllBtn").prop("checked", false);
                }
            })


            $("#checkedRevBtn").click(function () {
                //反选按钮：选中变为未选中，未选中变为选中
                $("input[name='items']").each(function () {
                    //alert(this.checked);//正在遍历的dom对象
                    this.checked = !this.checked;
                });//设置不同的值 无法隐式迭代
            });
            
            $("#sendBtn").click(function () {
                //④提交按钮：点击后依次弹出选中内容
                //获取选中的复选框
                $("[name='items']:checked").each(function () {
                    alert(this.value);
                });
            });

        });

    </script>
</head>
<body>

<form method="post" action="">

    熟悉的编程语言是：
    <br/>
    <input type="checkbox" name="items" value="C语言"/>C语言
    <input type="checkbox" name="items" value="C++语言"/>C++语言
    <input type="checkbox" name="items" value="python语言"/>python语言
    <input type="checkbox" name="items" value="Java语言"/>Java语言
    <br/>
    <input type="checkbox" id="checkedAllBtn" value="全选"/>全选/反不选
    <input type="checkbox" id="checkedRevBtn" value="反选"/>反选
    <input type="checkbox" id="sendBtn" value="提交"/>提　交
</form>
</body>
</html>
posted @ 2020-08-23 16:22  Tony小哥  阅读(139)  评论(0)  编辑  收藏  举报