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

今天在做一个项目功能时需要显示checkbox选项来让用户进行选择，由于前端不是很熟练，所以做了一个简单的Demo，其中遇到一些小问题，特记录下来，希望能帮到遇到类似问题的同学们。

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）:

IE10下的效果：

chrome浏览器下的效果：

通过在google上搜索，找到了原因：

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

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

            //获取选中项

            $('#huoqu2').click(function () {

                $('#show').html("");

                $("input[name='abc']:checked").each(function () {

                    //alert(this.value);

                    $('#show').append(this.value + "  ");

                });

            });

在chrome下的效果：

二：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>

jQuery获取checkbox选中项等操作及注意事项的更多相关文章

  1. [开发笔记]-jQuery获取checkbox选中项等操作及注意事项

    今天在做一个项目功能时需要显示checkbox选项来让用户进行选择,由于前端不是很熟练,所以做了一个简单的Demo,其中遇到一些小问题,特记录下来,希望能帮到遇到类似问题的同学们. 1. 获取chec ...

  2. jquery获取select选中项的文本

    使用jquery获取选中的值很简单 $("#select").val(); 但是获取选中的文本就没有这么直接了 $("#select").find(" ...

  3. jQuery获取radio选中项的值【转藏】

    <title></title> <script src="js/jquery-1.7.2.min.js"></script> < ...

  4. jquery 获取checkbox 选中值并拼接字符集

    1.代码示例: var chk_value =[]; $('input[name="rewardids"]:checked').each(function(){   chk_val ...

  5. jquery获取select选中项 自定义属性的值

    <select id="serialNo" > <option value=''1' data-id="001">第一次</opt ...

  6. Jquery怎么获取select选中项 自定义属性的值

    Jquery如何获取select选中项 自定义属性的值?HTML code <select id="ddl" onchange="ddl_change(this)& ...

  7. JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Jquery 获取 radio选中值，select选中值

    随着Jquery的作用越来越大,使用的朋友也越来越多.在Web中,由于CheckBox.Radiobutton .DropDownList等控件使用的频率比较高,就关系到这些控件在Jquery中的操作 ...

  9. jquery获取radio选中值及遍历

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项:1.& ...

随机推荐

  1. Python 得到Twitter所有用户friends和followers

    CODE: #!/usr/bin/python # -*- coding: utf-8 -*- ''' Created on 2014-7-29 @author: guaguastd @name: f ...

  2. Jenkins master在windows

    Jenkins master在windows上安装 1 Jenkins Jenkins由以前的hudson更名而来.Jenkins的主要功能是监视重复工作的执行,例如软件工程的构建或在cron下设置的 ...

  3. 【百度地图API】手机浏览器抓包工具及其使用方法

    原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...

  4. Android_开发人员经常使用的颜色

    Android开发中经常要用一些个性化的颜色,然而茫茫的RBG颜色对比表,往往给人眼花缭乱的感觉,更别说从中轻易选出一两种比較惬意的颜色,以下我就总结一下开发中经常使用到的比較绚丽的颜色. 以下是经常 ...

  5. js 控制radio选项

    <input type="radio" name="rk" value="aaa" />1<input type=&quo ...

  6. new 和delete

    转自:http://www.cnblogs.com/charley_yang/archive/2010/12/08/1899982.html 一直对C++中的delete和delete[]的区别不甚了 ...

  7. 四大OLAP工具选型浅析

    OLAP(在线分析处理)这个名词是在1993年由E.F.Codd提出来的,只是,眼下市场上的主流产品差点儿都是在1993年之前就已出来,有的甚至已有三十多年的历史了.OLAP产品不少,本文将主要涉及C ...

  8. node.js + mongodb

    node.js + mongodb 这次内容是结合bootstrap把登陆注册做好,还有就是express的中间件等问题. 看这篇博客之前建议先看我上篇写的那篇博客http://www.cnblogs ...

  9. Cacti+Nagios监控平台完美整合

    Cacti+Nagios监控平台完美整合 本博文出自51CTO博客吴光科博主,有任何问题请进入博主页面互动讨论!博文地址:http://wgkgood.blog.51cto.com/1192594/1 ...

  10. 2.1 LINQ的查询表达式

    在进行LINQ查询的编写之前,首先需要了解查询表达式.查询表达式是LINQ查询的基础,也是最常用的编写LINQ查询的方法. 查询表达式由查询关键字和对应的操作数组成的表达式整体.其中,查询关键字是常用 ...