jquery之checkbox全选反选提交参数

实现效果

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Checkbox操作示例</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            // 全选
            $("#selectAll").on("click", function(){
                $("input[type='checkbox']").prop("checked", true);
            });
            // 全不选
            $("#unselectAll").on("click", function(){
                $("input[type='checkbox']").prop("checked", false);
            });
            // 反选
            $("#invertSelect").on("click", function(){
                $("input[type='checkbox']").each(function(){
                    $(this).prop("checked", !$(this).prop("checked"));
                });
            });


            // 提交
            $("#submit").on("click", function(){
                var selectedValues = [];
                $("input[type='checkbox']:checked").each(function(){
                    selectedValues.push($(this).val());
                });
                // 在这里可以将选中的值进行处理或发送到服务器
                alert("选中的值:" + selectedValues);
            });
        });

    </script>
</head>
<body>
<h1>Checkbox操作示例</h1>
<label><input type="checkbox" name="option" value="1">选项1</label><br>
<label><input type="checkbox" name="option" value="2">选项2</label><br>
<label><input type="checkbox" name="option" value="3">选项3</label><br>
<label><input type="checkbox" name="option" value="4">选项4</label><br>
<button id="selectAll">全选</button>
<button id="unselectAll">全不选</button>
<button id="invertSelect">反选</button>
<button id="submit">提交</button>
</body>
</html>

在上述示例中,我们在<head>标签中引入了jQuery库,并在<script>标签中编写了全选、全不选、反选和提交的操作方法。在<body>标签中,我们创建了一些checkbox选项,并使用<button>标签来触发相应的操作方法。当点击不同的按钮时,相应的JavaScript代码会执行,实现了checkbox的全选、全不选、反选和提交功能。

在提交按钮的点击事件中,我们通过$("input[type='checkbox']:checked")选择所有被选中的checkbox,并将其值存入selectedValues数组中。你可以根据自己的需求来处理选中的值,例如将其发送给服务器或进行其他操作。

相关推荐
东风西巷24 分钟前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军32 分钟前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离38 分钟前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw1 小时前
鸿蒙工程版本与设备版本不匹配
前端
gnip1 小时前
http缓存
前端·javascript
我不只是切图仔2 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
JohnYan2 小时前
工作笔记 - 微信消息发送和处理
javascript·后端·微信
该用户已不存在2 小时前
macOS是开发的终极进化版吗?
前端·后端
小豆包api2 小时前
小豆包AI API × Nano Banana:3D手办 + AI视频生成,「动起来」的神级玩法!
前端·api
陈陈爱java3 小时前
Spring八股文
开发语言·javascript·数据库