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数组中。你可以根据自己的需求来处理选中的值,例如将其发送给服务器或进行其他操作。

相关推荐
浩男孩7 分钟前
🍀封装个 Button 组件,使用 vitest 来测试一下
前端
蓝银草同学11 分钟前
阿里 Iconfont 项目丢失?手把手教你将已引用的 SVG 图标下载到本地
前端·icon
布列瑟农的星空21 分钟前
重学React —— React事件机制 vs 浏览器事件机制
前端
初级炼丹师(爱说实话版)1 小时前
MySql速成笔记5(多表关系)
笔记
一小池勺1 小时前
CommonJS
前端·面试
孙牛牛1 小时前
实战分享:一招解决嵌套依赖版本失控问题,以 undici 为例
前端
用户52709648744901 小时前
Git 最佳实践
前端
星秀日1 小时前
JavaWeb--Ajax
前端·javascript·ajax
4_0_41 小时前
全栈视角:从零构建一个现代化的 Todo 应用
前端·node.js
BumBle2 小时前
uniapp 用css实现圆形进度条组件
前端·vue.js·uni-app