前端：表格全选、全不选、提交

最新推荐文章于 2023-06-15 11:32:30 发布

Abner_iii

最新推荐文章于 2023-06-15 11:32:30 发布

阅读量289

点赞数 1

分类专栏： Web前后端相关文章标签： html javascript css

本文链接：https://blog.csdn.net/weixin_45703743/article/details/120129017

版权

Web前后端相关专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<!--实现全选、全不选、提交。遗留反选功能未实现，dai

主要学习$(选择器)的用法


 -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery.js"></script><!--引入jquery文件-->
    <script>

        $(function (){

            $("#All").click(function (){
                $(":checkbox").prop("checked",true);
            })

            $("#None").click(function (){
                $(":checkbox").prop("checked",false);
            })

            $("#AllorNone").click(function (){
                //同类型的一次多选
                $(":checkbox[name='items']").prop("checked",this.checked);
            })

            $("#Send").click(function ( )  {
                $(":checkbox[name='items']:checked").each(function(){
                    alert(this.value);
                })

            })

        })

    </script>


</head>
<body>
    <form method="post" action="">
        <p>你的爱好是</p>
        <input type="checkbox" id="AllorNone" /> 全选/全不选
        <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="All" value="全选" />
        <input type="button" id="None" value="全不选" />
        <input type="button" id="Send" value="提交" />

    </form>




</body>
</html>

在这里插入图片描述

Abner_iii

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端：表格全选、全不选、提交

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery.js"></script><!--引入jquery文件
复制链接

扫一扫