超超爱哭包 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条)

报告相同问题？

问题事件

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

悬赏问题

  • ¥15 网络科学导论，网络控制
  • ¥100 安卓tv程序连接SQLSERVER2008问题
  • ¥15 利用Sentinel-2和Landsat8做一个水库的长时序NDVI的对比，为什么Snetinel-2计算的结果最小值特别小，而Lansat8就很平均
  • ¥15 metadata提取的PDF元数据，如何转换为一个Excel
  • ¥15 关于arduino编程toCharArray()函数的使用
  • ¥100 vc++混合CEF采用CLR方式编译报错
  • ¥15 coze 的插件输入飞书多维表格 app_token 后一直显示错误，如何解决？
  • ¥15 vite+vue3+plyr播放本地public文件夹下视频无法加载
  • ¥15 c#逐行读取txt文本，但是每一行里面数据之间空格数量不同
  • ¥50 如何openEuler 22.03上安装配置drbd