当前位置：首页 > 前端 >

使用JQuery获取被选中的checkbox的value值

时间：2023-08-20 01:05:06浏览：1652 转载 

<html>
    <head>
        <meta charset="utf-8">
        <!-- 引入JQuery -->
        <script src="js/jquery.min.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="checkbox" value="AAA" name="Now">芒果2</input>
        <input type="checkbox" value="BBB" name="Now">葡萄2</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[name=check]:checkbox'),function(){
                if(this.checked){
                    window.alert("你选了："+
                        $('input[name=check]:checked').length+"个，其中有："+$(this).val());
                }
            });
        });
    </script>


	</html>

jQuery多种获取checkbox值等操作：


https://blog.csdn.net/I_lost/article/details/103876698




上一篇：如何用CSS+HTML制作表单完成进度条效果
下一篇：带搜索框的jQuery下拉框美化插件 searchable 使用及多个下拉框遮挡的解决办法

发表评论

昵称：  验证码：

关于博主

博主

博主：BlueCode

职业：web程序

简介：2002年开始一直从事Web制作，网站运营，会PHP+MYSQL ASP+MSSQL，微信开发

  • Linux文章
  • PHP文章
  • 随机文章