超超爱哭包 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 如何对参数分析结构进行绘图
  • ¥15 做一个满足376和698规约的集中器程序
  • ¥50 python如何用抖音这个接口输入抖音ID查询用户信息
  • ¥30 关于移动Web网页使用TinyMCE富文本编辑器上传图片后的光标定位、压缩等几个问题如何解决:
  • ¥40 activeMq在同服务器centos8下消费很慢
  • ¥20 为什么zynq CAN IP 无法进入config配置模式,XCan_SelfTest函数失效?
  • ¥15 Pycharm中程序直接运行可以但进入调试报错
  • ¥15 MATLAB动图问题
  • ¥15 有段代码不知道怎么理解,const isToken = (config.headers || {}).isToken === false
  • ¥15 我的显卡支持CUDA最高版本是12.3,这个版本也支持VS 2022 17.0这种情况下如果我想下载CUDA11.8,需要下载旧版本的VS2022吗