复选框checkBox取值的三种方法

前端 专栏收录该内容
3 篇文章 0 订阅

<head>

    <meta charset="UTF-8">

    <title>checkBox</title>

    <!--引入jquery文件-->

    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>

    <script>

        //获取复选框参数方法. 第一种

        function  getCheckBoxValueOne() {

            //获取name="box"选中的checkBox的元素

            var  ids = $('input:checkbox[name="box"]:checked');

             var data = '';

             alert(ids);

             for (var i = 0; i < ids.length; i ++) {

                 //利用三元运算符去点

                 data += ids[i].value + (i == ids.length - 1 ? '':',');

             }

             //弹出结果

             alert(data);

        }

        //获取复选框参数方法. 第二种

        function getCheckBoxValueTwo() {

            //获取checkBox的元素

            var ids = $('input[type=checkbox]');

            var data = '';

            ids.each(function () {

                //获取当前元素的勾选状态

                if ($(this).prop("checked")) {

                    data = data + $(this).val() + ",";

                }

            });

            //去最后的点

            data = data.substring(0, data.length - 1);

             //弹出结果

            alert(data);

        }

        //获取复选框参数方法. 第三种

        function getCheckBoxValueThree() {

            //获取input类型是checkBox并且 name="box"选中的checkBox的元素

            var data = $('input:checkbox[name="box"]:checked').map(function () {

                return $(this).val();

            }).get().join(",");

          //弹出结果

            alert(data);

        }

  

    </script>

</head>

<body>

 运动: <input type="checkbox" name="box" value="运动"/>

 跳舞: <input type="checkbox" name="box" value="跳舞"/>

 游戏: <input type="checkbox" name="box" value="游戏"/>

 唱歌: <input type="checkbox" name="box" value="唱歌"/>

 音乐: <input type="checkbox" name="box" value="音乐"/><br/>

  <input type="button" value="第一种" οnclick="getCheckBoxValueOne()"><br/>

  <input type="button" value="第二种" οnclick="getCheckBoxValueTwo()"><br/>

  <input type="button" value="第三种" οnclick="getCheckBoxValueThree()"><br/>

</body>

  • 1
    点赞
  • 0
    评论
  • 1
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

进朱者赤

多多支持

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值