使用JQuery获取被选中的checkbox的value值 以及全选、反选

3人阅读 评论(0) 收藏 举报
分类:
以下为使用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>
复制代码

 实现全选反选 注意用:prop

复制代码
<ul id = "list-unstyled" class="list-unstyled">
    <li><input name="check" type="checkbox" value="9-DM"></li>
    <li><input name="check" type="checkbox" value="10-DM"></li>
    <li><input name="check" type="checkbox" value="11-DM"></li>
    <li><input name="check" type="checkbox" value="12-DM"></li>
</ul>
复制代码

 

复制代码
    // 全选
   
    $('#allcheck').click(function(){

        $('input[name="check"]').prop('checked','true');
    });

    //反选
    $('#reversecheck').click(function(){
        $('input[name="check"]').each(function () {
            $(this).prop("checked", !$(this).prop("checked"));
        });

    });
复制代码
查看评论

jQuery 获取所有checkbox选中的值 、 全选checkbox等

//获取checkbox选中的值  返回 (值,值,值) 的字符串         function getCheckedboxValue() {             var ckbValue =...
  • hzy19860111
  • hzy19860111
  • 2013-10-10 09:37:29
  • 1780

JQuery 判断checkbox是否选中,checkbox全选反选,以及执行click事件

$(function(){ if ($.browser.msie) { $(':checkbox').click(function () { this.blur(); this.focus...
  • zhxh0376
  • zhxh0376
  • 2014-04-28 14:14:59
  • 3194

【jQuery】复选框的全选、反选,判断哪些复选框被选中

本文与《【JavaScript】复选框的全选、反选,判断哪些复选框被选中》(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,同样做到如下的效果: 布局还是同样的布局,只是由...
  • yongh701
  • yongh701
  • 2015-06-06 10:52:47
  • 2658

iCheck插件的全选、反选、获取值操作

1.js包下载 https://pan.baidu.com/s/1cJahbg 2.插件文档 http://www.bootcss.com/p/icheck/ 3.引入js文件 ...
  • ya_1249463314
  • ya_1249463314
  • 2017-09-28 10:47:03
  • 4118

【JavaScript】复选框的全选、反选,判断哪些复选框被选中

复选框的全选、反选,判断哪些复选框被选中,这个功能不难做, 利用document.getElementsByName("xxx");能够轻易实现,注意其返回值是一个节点数组便是了。 不过这功能对于...
  • yongh701
  • yongh701
  • 2015-06-06 09:21:43
  • 3855

jQuery的CheckBox全选反选时,勾选失效的问题

在做复选框的时候,全选、反选应该是比较常用的功能。我在做这个功能时,发现多次全选、反选之后,页面展示的“勾选”效果失败了,页面上没有展示出勾选效果。但是追踪js,发现已经是选中状态。        ...
  • u010882234
  • u010882234
  • 2017-02-28 13:36:23
  • 2458

jquery实现复选框(checkbox)的全选与反选

介绍一下jquery实现checkbox的全选与反选
  • u013871100
  • u013871100
  • 2016-10-06 23:24:35
  • 2612

jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)

在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值,还有获得选中的文本,以下给出demo,使用jquery方法操作checkbox demo: ...
  • u014079773
  • u014079773
  • 2016-08-30 17:33:07
  • 3969

jquery checkbox 全选 反选 子级全选默认选中父级

js中: label>input type="checkbox" id="cb_all"/>全选label>         label>input type="checkbox" class...
  • tan01234
  • tan01234
  • 2017-08-31 15:06:20
  • 364

JQuery循环取出checkbox选中的值

惯例: 我是温浩然: 先说是怎样实现的,再说为何这样实现。 下面是JSP中代码: 涉及维度 ...
  • u012246342
  • u012246342
  • 2015-08-04 17:20:42
  • 2456
    个人资料
    等级:
    访问量: 110
    积分: 43
    排名: 182万+
    文章分类
    文章存档