jquery之checkbox全选反选提交参数

这篇具有很好参考价值的文章主要介绍了jquery之checkbox全选反选提交参数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

实现效果

 jquery之checkbox全选反选提交参数,乱七八糟,html,js,jquery,前端,javascript,笔记

<!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数组中。你可以根据自己的需求来处理选中的值,例如将其发送给服务器或进行其他操作。文章来源地址https://www.toymoban.com/news/detail-745185.html

到了这里,关于jquery之checkbox全选反选提交参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包