超超爱哭包 2021-11-30 14:36 采纳率: 20%
浏览 32
已结题

使用jquery实现复选框的全选和获取选择值得功能

使用jquery实现复选框的全选和获取选择值得功能，实现效果如下图所示：

img

  • 写回答

3条回答 默认 最新

  • 你好！机器人 2021-11-30 14:47
    关注
    
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
  
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //用id选择器获取button组件，这里可以用其他选择器，如class为. id为# 等。详情看jQuery官网
            $("#selectAll").click(function () {
                //设置选择框选中为true
                $("input[type='checkbox']").prop("checked", true);
            });
            var aa=""; 
            $("#getVal").click(function () {

                $("input[type='checkbox']:checkbox:checked").each(function(){ 

                    aa+=$(this).val() 
                }) 
            })
             console.log(aa)
        });
    </script>
</head>

<body>

    <input type="checkbox" value="足球"/>足球
    <input type="checkbox" value="篮球"/>篮球
    <input type="checkbox" value="羽毛球"/>羽毛球
    <input type="checkbox" value="乒乓球"/>

    <br>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="getVal" value="获取">

</body>

</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

  • jQuery实现复选框全选和取消全选功能
    2024-04-25 11:38
    牧小七的博客 使用jQuery实现复选框全选和取消全选功能，在全选状态取消其中一项勾选时，全选按钮会自动取消勾选，所有项全部单独勾选上时，全选按钮也会自动勾选。
  • jQuery实现复选框全选/取消全选/反选及获得选择的值
    2020-10-25 19:37
    jQuery实现复选框全选、取消全选、反选及获得选择的值是前端开发中常遇到的需求，下面详细介绍一下这些操作的实现方式。 首先，全选功能通常会有一个控制所有复选框状态的主复选框，当主复选框被选中时，页面上所有...
  • 基于 jQuery 实现复选框全选与选中项查询功能
    2025-06-20 14:11
    Auscy的博客 通过以上方案，可实现功能完整、性能优化的复选框全选与选中项查询功能，满足大多数前端项目需求。通过以上实现，你可以构建一个功能完善、交互友好的复选框全选与查询系统，满足大多数项目需求。
  • js与jQuery实现checkbox复选框全选/全不选的方法
    2020-11-24 03:56
    本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考，具体如下： 先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧，很多时候我们都...
  • jQuery实现复选框的全选和反选
    2020-10-20 13:08
    在本文中，我们将深入探讨如何使用 jQuery 实现复选框的全选、反选以及反转功能。 首先，我们来看一下提供的 HTML 代码段，它定义了一个简单的表单，包含三个复选框（苹果、香蕉、橘子）以及三个按钮（全选、全不选...
  • jQuery实现复选框checkbox全选、反选功能.rar
    2019-07-10 11:51
    本示例中，我们关注的是如何使用jQuery来实现复选框（checkbox）的全选和反选功能，这对于构建具有交互性的表单或者需要用户进行多选操作的界面是非常实用的。 在HTML中，复选框通常由`<input>`标签定义，类型为...
  • JQuery实现列表中复选框全选反选功能封装(推荐)
    2020-10-21 01:38
    总结来说，JQuery实现列表中复选框全选反选功能封装是一个很好的实践，它展示了如何利用JQuery操作DOM和事件监听的能力来实现高效和用户友好的界面交互。通过合理使用自定义属性和选择器，可以显著降低HTML结构和...
  • JQuery复选框全选效果如何实现
    2020-10-15 08:41
    在这个函数内部，使用this.checked获取全选复选框的选中状态，然后通过JQuery的 $("input").prop("checked", this.checked);代码行将这个状态应用到页面上所有的复选框元素上。 具体实现分为几个步骤： - 使用选择...
  • Js实现复选框的全选、全不选反选功能代码实例
    2020-10-15 14:36
    在网页开发中，经常需要实现复选框（checkbox）的全选、全不选以及反选功能，以便用户能够方便地批量操作。本篇将详细讲解如何使用JavaScript（Js）实现这一功能，并提供一个具体的代码实例。 首先，我们需要了解复...
  • js实现复选框的全选和取消全选效果
    2020-10-20 17:35
    JavaScript 实现复选框全选和取消全选的效果是一个常见的前端交互功能，广泛应用于数据筛选、表单提交等场景。本文将深入解析如何利用 JavaScript 和 jQuery 来完成这一功能。 首先，HTML 结构中通常会有一个全选...
  • 基于JavaScript实现复选框的全选和取消全选
    2020-10-20 11:32
    在JavaScript中，实现复选框的全选和取消全选功能可以提升用户体验，使得用户能够方便地批量操作。下面将详细解释如何通过JavaScript实现这一功能。 首先，HTML部分创建了一个包含多个复选框的列表，每个复选框都有...
  • 利用Bootstrap实现表格复选框checkbox全选
    2020-08-31 22:04
    在本文中，我们将探讨如何利用Bootstrap这一流行的前端框架来实现表格中的复选框全选功能。Bootstrap是由Twitter开发的，它提供了一套响应式布局、移动设备优先的WEB开发工具，使得网页设计更加简单和快捷。 要实现...
  • 用jQuery实现复选框全选、反选与获取选中的复选框的值
    2022-08-29 21:58
    两只羊-的博客 和js实现的步骤一样，先是实现全选，再是反选，最后创建函数，储存已选中的反选框的值再在全选反选中调用函数。用jQuery实现以上效果要比js简单的多。
  • 快速掌握jQuery复选框全选与全不选功能实现
    2025-08-04 19:21
    xinwuji312的博客 jQuery是一个快速、小型且功能丰富的JavaScript库，它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互，极大地提升了开发者在前端开发中的效率和体验。自从2006年发布以来，jQuery迅速成为最流行的JavaScript库...
  • 【JQuery 实现 layui 复选框 全选/反选/清除的功能】
    2024-06-01 16:11
    戚月半的博客 获取到渲染过的 div class=“layui-input-block” 里的 input 元素标签，改变其 checked属性。
  • jquery复选框CHECKBOX全选、反选
    2020-10-30 08:04
    在jQuery中，处理复选框（CHECKBOX）的全选和反选操作是...总之，`jQuery.fn.checkgroup`函数提供了一种灵活且高效的方式来管理复选框的全选和反选操作，它可以轻松地适应不同布局和功能需求，提高了前端开发的效率。
  • 没有解决我的问题, 去提问

问题事件

  • 系统已结题 12月8日
  • 已采纳回答 11月30日
  • 创建了问题 11月30日