原文：http://blog.csdn.net/u014079773/article/details/52371382

在实际开发中我们经常操作checkbox，不仅仅要获得checkbox选中的值，还有获得选中的文本，以下给出demo，使用jQuery方法操作checkbox

demo：

<!DOCTYPE html>

<html>

    <head >

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）</title>

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <script type="text/javascript" >

         //全选

         function selectAll() {

             //方法一：

             $("input[name='bjjb']").attr("checked",true);

             //方法二：

             /**$("input[name='bjjb']").each(function(){

                  $(this).attr("checked",true);

             });*/

             //获得checkbox的值和文本

              $("#checked").html("");

              $("#checkedText").html("");

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

                    $("#checked").append($(this).val()+",");

                    //注意文本一定要元素标签如span否则next得不到值

                    $("#checkedText").append($(this).next().text()+",");

              });

         }

         //取消全选

         function selectNone(){

             //方法一：

            $("input[name='bjjb']").removeAttr("checked");

            //方法二：

            /*$("input[name='bjjb']").each(function(){

                  $(this).attr("checked",false);

             });*/

              //获得checkbox的值和文本

              $("#checked").html("");

              $("#checkedText").html("");

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

                    $("#checked").append($(this).val()+",");

                    //注意文本一定要元素标签如span否则next得不到值

                    $("#checkedText").append($(this).next().text()+",");

              });

         }

         //反选

         function selectInvert() {

            $("input[name='bjjb']").each(function(index,item){

                 if ($(this).attr("checked")) {

                    $(this).removeAttr("checked");

                 } else {

                    $(this).attr("checked", true);

                }

            });

         }

        function selectOne() {

            var checked=$("input[name='bjjb']:checked");

            if(checked.length==0){

                alert("请至少选择一个");

                return ;

            }

            $("#checked").html("");

            $("#checkedText").html("");

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

                $("#checked").append($(this).val()+",");

                //注意文本一定要元素标签如span否则next得不到值

                $("#checkedText").append($(this).next().text()+",");

            });

        }

     </script>

    </head>

    <body>

        <form  id="" action="" method="post">

            <div >

                <input type="checkbox" name="bjjb" value="1"/><span>交通事故</span></br>

                <input type="checkbox" name="bjjb" value="2"/><span>自然灾害</span></br>

                <input type="checkbox" name="bjjb" value="3"/><span>恶劣天气</span></br>

                <input type="checkbox" name="bjjb" value="4"/><span>严重违法行为</span></br>

                <input type="checkbox" name="bjjb" value="5"/><span>路面损毁</span></br>

            </div>

            <div style="margin-top:10px;">

                <input type="button"   onclick="selectAll()"   value="全选" />

                <input type="button"   onclick="selectNone()"    value="全不选" />

                <input type="button"   onclick="selectInvert()"   value="反选" />

                <input type="button"   onclick="selectOne()"    value="必须选择一个" />

            </div>

            <div style="margin-top:10px;">

                选中项：<div id="checked"></div>

                选中文本：<div id="checkedText"></div>

            </div>

        </form>

  </body>

</html>

备注：案例中给出一些常见的jquery操作checkbox，文本值必须用元素标签如span或者label，否则$(this).next().text()获得的值为空字符串

jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）的更多相关文章

  1. 解决jquery操作checkbox全选全不选无法勾选问题

    最近在学习中使用jquery操作checkbox,使用下面方法进行全选.反选:$("input[name='checkbox']").attr("checked" ...

  2. jQuery操作CheckBox的方法(选中,取消,取值)

    jQuery操作CheckBox的方法(选中,取消,取值). 代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ ...

  3. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  4. 解决jquery操作checkbox火狐下第二次无法勾选问题

    最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选.反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果. html代 ...

  5. jQuery操作CheckBox的方法(选中,取消,取值)详解

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...

  6. jquery 操作checkbox是否选中的正确方法

    对于checkbox,若要选中,需要用jquery的prop()方法,不要用attr(). <input type="checkbox" id="slide_che ...

  7. JQuery操作CheckBox 第二次无法选中的问题

    用JQuery做CheckBox全选和反选的时候,遇到一个问题.当用JQ控制全选,全取消一次以后,再次点击全选,发现代码变了,但是CheckBox没有处于选中状态. 百度后得知: 我使用的方法是 $( ...

  8. jquery 操作 checkbox

    对checkbox的其他几个操作 1. 全选2. 取消全选3. 选中所有奇数4. 反选5. 获得选中的所有值 js代码 $("document").ready(function() ...

  9. jQuery操作checkbox选择

    1.checkbox list选择 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

随机推荐

  1. virtual 三种用法

    virtual用法一 #include using namespace std;class A{public:     virtual  void  display(){  cout<<& ...

  2. luogu4001 [BJOI2006]狼抓兔子

    裸dinic就跑过去了,哪用得着平面图最小割=最短路-- #include <iostream> #include <cstring> #include <cstdio& ...

  3. jquery如何获取某一个兄弟节点

    $('#id').siblings() 当前元素所有的兄弟节点 $('#id').prev() 当前元素前一个兄弟节点 $('#id').prevaAll() 当前元素之前所有的兄弟节点 $('#id ...

  4. LiveScript 函数

    The LiveScript Book     The LiveScript Book 函数 定义函数是非常轻量级的. 1.(x, y) -> x + y2.3.-> # an empty ...

  5. 使用python在校内发人人网状态(人人网看状态)_python

    #_*_coding:utf_8_ from sgmllib import SGMLParserimport sys, urllib2, urllib, cookielibimport datetim ...

  6. 机器学习实战之AdaBoost算法

    一,引言 前面几章的介绍了几种分类算法,当然各有优缺.如果将这些不同的分类器组合起来,就构成了我们今天要介绍的集成方法或者说元算法.集成方法有多种形式:可以使多种算法的集成,也可以是一种算法在不同设置 ...

  7. mybatis学习（十二）——mybatis逆向工程

    MyBatis Generator (MBG)是一个mabatis的代码生成器,能够根据表自动生成mapper接口,mapper.xml文件,javaBean文件. 1.MBG的下载 打开https: ...

  8. 修改Tomcat HTTP端口号（8080→8088）Eclipse

    1.如果不用Eclipse,修改Tomcat的端口号,可以参考这篇: https://jingyan.baidu.com/article/adc815139b12def722bf7377.html t ...

  9. phpMyAdmin操作之改管理员密码

    1.登录phpMyAdmin 默认地址:http://localhost/phpmyadmin 2.点击用户按钮 3.往下拉找到修改密码 点执行就修改了 注意: 如果再次登录时报错提示: #1045 ...

  10. 【CF1029A】Many Equal Substrings（模拟）

    题意:给定一个长度为n的串s,要求构造一个长度最小的使s出现了k次的串,可以重叠 n<=50,k<=50 思路:计算一下前后缀相同长度 #include<cstdio> #in ...