博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用JQuery获取被选中的checkbox的value值
阅读量:6921 次
发布时间:2019-06-27

本文共 1125 字,大约阅读时间需要 3 分钟。

 

 

上网查了一下,感觉一些人回答得真的是不知所云,要么代码不够简便。或者是有些想装逼成分等。

以下为使用JQuery获取input checkbox被选中的值代码:

<html>

    <head>
        <meta charset="gbk">
        <!-- 引入JQuery -->
        <script src="jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="checkbox" value="橘子" name="check">橘子1</input>
        <input type="checkbox" value="香蕉" name="check">香蕉1</input>
        <input type="checkbox" value="西瓜" name="check">西瓜1</input>
        <input type="checkbox" value="芒果" name="check">芒果1</input>
        <input type="checkbox" value="葡萄" name="check">葡萄1</input>
        
        <input type="button" value="方法1" id="b1">
        <input type="button" value="方法2" id="b2">

    </body>
    
    <script>
        //方法1
        $("#b1").click(function(){
            //$('input:checkbox:checked') 等同于 $('input[type=checkbox]:checked')
            //意思是选择被选中的checkbox
            $.each($('input:checkbox:checked'),function(){
                window.alert("你选了:"+
                    $('input[type=checkbox]:checked').length+"个,其中有:"+$(this).val());
            });
        });
        
        //方法2
        $("#b2").click(function(){
            $.each($('input:checkbox'),function(){
                if(this.checked){
                    window.alert("你选了:"+
                        $('input[type=checkbox]:checked').length+"个,其中有:"+$(this).val());
                }
            });
        });
    </script>
</html>

转载于:https://www.cnblogs.com/Tohold/p/8806615.html

你可能感兴趣的文章
春运前4日全国累计发送旅客2.75亿人次 同比增0.55%
查看>>
Android Studio Java 8 语言功能支持更新
查看>>
深入浅出JavaScript运行机制
查看>>
试用 vue-admin-template 写一个自己的dashboard
查看>>
Stack Overflow 的 HTTPS 化:漫漫长路的终点
查看>>
springboot(十二):springboot如何测试打包部署
查看>>
程序员最不想你知道的谎言!
查看>>
京东到家的持续集成实践之路
查看>>
进阶组件之render props中进行公共属性的对象封装
查看>>
ijkplayer 音视频同步时间的计算
查看>>
全栈 - 14 ggplot2 基本语法和基础图形
查看>>
SpringMVC后台token防重复提交解决方案
查看>>
Mac OS 下配置多个 SSH Key
查看>>
vue插件之将指定的文字复制到剪切板
查看>>
Java锁之ReentrantLock(一)
查看>>
Macbook pro 加内存
查看>>
HTTP缓存
查看>>
守护客户数据价值:企业级NewSQL HTAP分布式云TBase架构详解
查看>>
vim常用操作
查看>>
awesome-typescript-loader报watchRun问题
查看>>