jquery的遍历方法可以获取复选框所欲的选中值

jquery的遍历方法可以获取复选框所欲的选中值

1

2

$("input:checkbox:checked").each(function(index,element));   // 为所有选中的复选框执行函数,函数体中可以取出每个复选框的值

$("input:checkbox:checked").map(function(index,domElement)); // 将所有选中的复选框通过函数返回值生成新的jQuery 对象

实例演示:点击按钮获取checkbox的选中值

  1. 创建Html元素

    1

    2

    3

    4

    5

    6

    7

    8

    <div class="box">

        <span>点击按钮获取checkbox的选中值:</span>

        <div class="content">

           <input type='checkbox' name='message' value='1'/>发送短信

           <input type='checkbox' name='message' value='2'/>发送邮件

        </div>

        <input type="button" value="提交">

    </div>

  2. 设置css样式

    1

    2

    3

    div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

    div.box>span{color:#999;font-style:italic;}

    div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

  3. 编写jquery代码

    1

    2

    3

    4

    5

    6

    7

    8

    $(function(){ 

        $("input:button").click(function() {

            text = $("input:checkbox[name='message']:checked").map(function(index,elem) {

                return $(elem).val();

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

            alert("选中的checkbox的值为:"+text);

        });

    });

  4. 观察效果

或者

你需要使用 each 来将每一个 checked 放到一个数组里面

 

1

2

3

4

5

6

7

8

9

$(document).ready(function(){

    var checked = [];

    $("#submitButton").click(function(){

        $('input:checkbox:checked').each(function() {

            checked.push($(this).val());

        });

        alert(checked);

    });

});

 

如果两个都选,变量 checked 就是 [1, 2],alert 出来是 1,2。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值