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之文件操作
Mar 07 Javascript
当前页禁止复制粘贴截屏代码小集
Jul 24 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
js随机生成26个大小写字母
Feb 12 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 Javascript
vue两组件间值传递 $router.push实现方法
May 15 Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 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
smarty 缓存控制前的页面静态化原理
2013/03/15 PHP
将php数组输出html表格的方法
2014/02/24 PHP
php如何解决无法上传大于8M的文件问题
2014/03/10 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
JSChart轻量级图形报表工具(内置函数中文参考)
2010/10/11 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
简单常用的幻灯片播放实现代码
2013/09/25 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
2014/03/10 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
Node.js 多线程完全指南总结
2019/03/27 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
如何通过JS实现转码与解码
2020/02/21 Javascript
Python计算三维矢量幅度的方法
2015/06/15 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python 删除列表里所有空格项的方法总结
2018/04/18 Python
使用python3实现操作串口详解
2019/01/01 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
python wsgiref源码解析
2021/02/06 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
如何整合JQuery和Prototype
2014/01/31 面试题
淮海战役观后感
2015/06/11 职场文书
校友会致辞
2015/07/30 职场文书
2016年寒假学习心得体会
2015/10/09 职场文书
学校团代会开幕词
2016/03/04 职场文书
解决Vmware虚拟机安装centos8报错“Section %Packages Does Not End With %End. Pane Is Dead”
2022/06/01 Servers