jQuery中获取checkbox选中项等操作及注意事项


Posted in Javascript onNovember 24, 2013

1. 获取checkbox的选中项
2. checkbox选项的全选 反选操作

用于测试的checkbox代码段:

<div>
            <input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /><label for="in1">一年级</label>
            <input type="checkbox" name="abc" value="二年级" id="in2" /><label for="in2">二年级</label>
            <input type="checkbox" name="abc" value="三年级" id="in3" /><label for="in3">三年级</label>
            <input type="checkbox" name="abc" value="四年级" id="in4" /><label for="in4">四年级</label>
            <input type="checkbox" name="abc" value="五年级" id="in5" /><label for="in5">五年级</label>
            <input type="checkbox" name="abc" value="六年级" id="in6" /><label for="in6">六年级</label>
            <input type="checkbox" name="abc" value="七年级" id="in7" /><label for="in7">七年级</label>
            <input type="checkbox" name="abc" value="八年级" id="in8" /><label for="in8">八年级</label>
        </div>

一:首先来说第一点,获取checkbox的选中项。网上搜到的大部分方法使用each来获取:

$("input[name='checkbox'][checked]").each(function () {
    alert(this.value);
})
但在测试时我就遇到了问题,这种方法在IE下可以获取,但在firefox和chrome浏览器下就无法获取当前的选中项,测试效果如下:

IE下的测试效果(我的是IE10):

jQuery中获取checkbox选中项等操作及注意事项

IE10下的效果:

jQuery中获取checkbox选中项等操作及注意事项

chrome浏览器下的效果:

jQuery中获取checkbox选中项等操作及注意事项

通过在google上搜索,找到了原因:

jQuery中获取checkbox选中项等操作及注意事项

网址:  Jquery 选中多少个input CheckBox问题,IE正常,FF和Chrome无法取到值

jQuery中获取checkbox选中项等操作及注意事项

因为我用的jquery版本是1.7.2的,所以这里我得用 :checked 来获取才行,修改后的代码:

//获取选中项
            $('#huoqu2').click(function () {
                $('#show').html("");
                $("input[name='abc']:checked").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

在chrome下的效果:

jQuery中获取checkbox选中项等操作及注意事项

二:checkbox的全选 反选操作:

由于这两个比较简单,我就直接上代码吧:

//全选/取消全选
            $('#quanxuan').toggle(function () {
                $("input[name='abc']").attr("checked", 'true');
            }, function () {
                $("input[name='abc']").removeAttr("checked");
            });

            //反选
            $('#fanxuan').click(function () {
                $("input[name='abc']").each(function () {
                    if ($(this).attr("checked")) {
                        $(this).removeAttr("checked");
                    } else {
                        $(this).attr("checked", 'true');
                    }
                });
            });

再总结一下:

jquery版本在1.3之前时,获取checkbox的选中项的操作:

                $("input[name='abc'][checked]").each(function () {
                    alert(this.value);
                });

jquery版本在1.3之后时,获取checkbox的选中项的操作:

                $("input[name='abc']:checked").each(function () {
                    alert(this.value);
                });
 

附 完整测试Demo代码:


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            //获取选中项(FF和chrome下无效)
            $('#huoqu').click(function () {
                //$("input[name='abc'][checked]").each(function () {
                //    alert(this.value);
                //});
                $('#show').html("");
                $("input[name='abc'][checked]").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

            //获取选中项
            $('#huoqu2').click(function () {
                $('#show').html("");
                $("input[name='abc']:checked").each(function () {
                    //alert(this.value);
                    $('#show').append(this.value + "  ");
                });
            });

            //全选/取消全选
            $('#quanxuan').toggle(function () {
                $("input[name='abc']").attr("checked", 'true');
            }, function () {
                $("input[name='abc']").removeAttr("checked");
            });

            //反选
            $('#fanxuan').click(function () {
                $("input[name='abc']").each(function () {
                    if ($(this).attr("checked")) {
                        $(this).removeAttr("checked");
                    } else {
                        $(this).attr("checked", 'true');
                    }
                });
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="checkbox" name="abc" value="一年级" id="in1" checked="checked" /><label for="in1">一年级</label>
            <input type="checkbox" name="abc" value="二年级" id="in2" /><label for="in2">二年级</label>
            <input type="checkbox" name="abc" value="三年级" id="in3" /><label for="in3">三年级</label>
            <input type="checkbox" name="abc" value="四年级" id="in4" /><label for="in4">四年级</label>
            <input type="checkbox" name="abc" value="五年级" id="in5" /><label for="in5">五年级</label>
            <input type="checkbox" name="abc" value="六年级" id="in6" /><label for="in6">六年级</label>
            <input type="checkbox" name="abc" value="七年级" id="in7" /><label for="in7">七年级</label>
            <input type="checkbox" name="abc" value="八年级" id="in8" /><label for="in8">八年级</label>
        </div>
        <br />
        <input type="button" id="huoqu" value="获取选中项(FF和chrome下无效)" />
        <input type="button" id="quanxuan" value="全选/取消全选" />
        <input type="button" id="fanxuan" value="反选" />
        <input type="button" id="huoqu2" value="获取选中项" />
       <br />
        选中项: <div id="show">
        </div>
    </form>
</body>
</html>

作者:酷小孩

Javascript 相关文章推荐
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
JS实现为表格动态添加标题的方法
Mar 31 Javascript
jQuery插件MixItUp实现动画过滤和排序
Apr 12 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jQuery ajax分页插件实例代码
Jan 27 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
Oct 21 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
vue+Vue Router多级侧导航切换路由(页面)的实现代码
Dec 20 Javascript
如何使用pm2快速将项目部署到远程服务器
Mar 12 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 #Javascript
javascript 实现字符串反转的三种方法
Nov 23 #Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 #Javascript
jquery实现图片滚动效果的简单实例
Nov 23 #Javascript
js图片向右一张张滚动效果实例代码
Nov 23 #Javascript
JavaScript实现简单的时钟实例代码
Nov 23 #Javascript
JS控制日期显示的小例子
Nov 23 #Javascript
You might like
php 获取本机外网/公网IP的代码
2010/05/09 PHP
PHP+ajax分页实例简析
2015/12/07 PHP
学习ExtJS accordion布局
2009/10/08 Javascript
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
2017/09/16 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
JavaScript Event Loop相关原理解析
2020/06/10 Javascript
微信小程序整个页面的自动适应布局的实现
2020/07/12 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
python妹子图简单爬虫实例
2015/07/07 Python
使用python实现接口的方法
2017/07/07 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
Python如何使用内置库matplotlib绘制折线图
2020/02/24 Python
python3发送request请求及查看返回结果实例
2020/04/30 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
茵宝(Umbro)英国官方商店:英国足球服装生产商
2016/12/29 全球购物
丝芙兰中国官方商城:SEPHORA中国
2018/01/10 全球购物
程序员经常用到的UNIX命令
2015/04/13 面试题
医科学校毕业生自荐信
2013/11/09 职场文书
合作协议书怎么写
2014/04/18 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
六一儿童节标语
2014/10/08 职场文书
单位接收证明格式
2015/06/18 职场文书
运动会通讯稿300字
2015/07/20 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
Jsonp劫持学习
2021/04/01 PHP
HTML页面中使两个div并排显示的实现
2022/05/15 HTML / CSS