jQuery复选框全选/全不选

最新推荐文章于 2024-04-17 09:12:12 发布

why-csdn

最新推荐文章于 2024-04-17 09:12:12 发布

阅读量155

点赞数

分类专栏：前端开发学习文章标签： jquery javascript css3 html5 html

本文链接：https://blog.csdn.net/weixin_43186036/article/details/105819068

版权

学习同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

前端开发

8 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html >
<html >
<head>
<meta  charset="utf-8" />
<title>6-5:复选框全选反选-2</title>
<style>
    form{
        width:300px;
        margin: 0 auto;
    }
</style>
 <!--   引入jQuery -->
<script src="../../scripts/jquery.js" type="text/javascript"></script>
</head>
<body>

<form>
   你爱好的运动是？<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
    <input type="checkbox" name="items" value="足球"/>足球
	<input type="checkbox" name="items" value="篮球"/>篮球
	<input type="checkbox" name="items" value="羽毛球"/>羽毛球
	<input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
	<input type="button" id="send" value="显示选中元素"/>
</form>
<script>
    $(function () {
        //全选/全不选
        $("#CheckedAll").click(function () {
          $('input[name="items"]').prop("checked",this.checked);
        })
        //每个选项的点集事件
        $('input[name="items"]').click(function () {
            var flag=true;
            $('input[name="items"]').each(function () {
                if(!this.checked){
                    flag=false;
                }
            })
            if(flag){
                $("#CheckedAll").prop("checked",true);
            }else{
                $("#CheckedAll").prop("checked",false);
            }
        })
		//显示选中元素
        $("#send").click(function () {
            var str="你选中的是：\r\n";
            $("input:checkbox:checked").each(function () {
                str += $(this).val()+"\r\n";
            })
            alert(str);
        })
    })

</script>
</body>
</html>

why-csdn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery复选框全选/全不选

<!DOCTYPE html ><html ><head><meta charset="utf-8" /><title>6-5:复选框全选反选-2</title><style> form{ width:300px; margin: 0 auto; }&...
复制链接

扫一扫