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 相关文章推荐
JQuery调webservice实现邮箱验证(检测是否可用)
May 21 Javascript
javascript 闭包详解
Jul 02 Javascript
详解javascript数组去重问题
Nov 06 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
JS一个简单的注册页面实例
Sep 05 Javascript
送你43道JS面试题(收藏)
Jun 17 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
微信小程序class封装http代码实例
Aug 24 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
php版微信自动登录并获取昵称的方法
2016/09/23 PHP
PHP单例模式与工厂模式详解
2017/08/29 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
JS实现下拉框的动态添加(附效果)
2013/04/03 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
2015/09/11 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
jQuery对象与DOM对象转换方法详解
2016/05/10 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
python中执行shell的两种方法总结
2017/01/10 Python
Python排序算法实例代码
2017/08/10 Python
python如何使用正则表达式的前向、后向搜索及前向搜索否定模式详解
2017/11/08 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python气泡提示与标签的实现
2020/04/01 Python
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
.NET面试问题集
2015/12/08 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
中专毕业生自荐信范文
2013/11/28 职场文书
高中生期末评语
2014/01/28 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
初中教务主任竞聘演讲稿(范文)
2019/08/20 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
在pyCharm中下载第三方库的方法
2021/04/18 Python
引用计数法和root搜索算法以及JVM中判定对象需要回收的方法
2022/04/19 Java/Android
MySQL数据库Innodb 引擎实现mvcc锁
2022/05/06 MySQL