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 相关文章推荐
服务器安全设置的几个注册表设置
Jul 28 Javascript
Jquery 点击按钮显示和隐藏层的代码
Jul 25 Javascript
JS常用正则表达式总结
Nov 12 Javascript
script标签属性用type还是language
Jan 21 Javascript
让JavaScript中setTimeout支持链式操作的方法
Jun 19 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
Oct 14 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
JS扩展String.prototype.format字符串拼接的功能
Mar 09 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 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面向对象编程快速入门
2006/10/09 PHP
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
基本jquery的控制tabs打开的数量的代码
2010/10/17 Javascript
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
jquery清空表单数据示例分享
2014/02/13 Javascript
Bootstrap基础学习
2015/06/16 Javascript
Bootstrap前端开发案例二
2016/06/17 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
基于vue的换肤功能的示例代码
2017/10/10 Javascript
解析vue中的$mount
2017/12/21 Javascript
Angular如何在应用初始化时运行代码详解
2018/06/11 Javascript
js实现GIF图片的分解和合成
2019/10/24 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
详解vue3.0 的 Composition API 的一种使用方法
2020/10/26 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
python实现简单的socket server实例
2015/04/29 Python
Python读写配置文件的方法
2015/06/03 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
HTML4和HTML5之间除了相似以外的10个主要不同
2012/12/13 HTML / CSS
微信html5页面调用第三方位置导航的示例
2018/03/14 HTML / CSS
美国著名首饰网站:BaubleBar
2016/08/29 全球购物
运动会解说词100字
2014/01/31 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
有关环保的标语
2014/06/13 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
中学生综合素质自我评价
2015/03/06 职场文书