JQuery判断checkbox是否选中及其它复选框操作方法合集


Posted in Javascript onJune 01, 2015

一、jquery判断checkbox是否选中及改变checkbox状态

jquery判断checked的三种方法:

.attr('checked):   //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false

.prop('checked'): //16+:true/false

.is(':checked'):    //所有版本:true/false//别忘记冒号哦

jquery赋值checked的几种写法:
所有的jquery版本都可以这样赋值:
// $("#cb1").attr("checked","checked");

// $("#cb1").attr("checked",true);

jquery1.6+:prop的4种赋值:
// $("#cb1″).prop("checked",true);//很简单就不说了哦

// $("#cb1″).prop({checked:true}); //map键值对

// $("#cb1″).prop("checked",function(){

return true;//函数返回true或false

});

//记得还有这种哦:$("#cb1″).prop("checked","checked");

二、jquery如何判断checkbox(复选框)是否被选中

谁都知道 在html 如果一个复选框被选中 是 checked="checked"。

但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked

所以很多朋友判断  if($("#id").attr("checked")=="true") 这个是错误的,其实应该是 if($("#id").attr("checked")==true)
例子里面包括了一下几个功能。

   <input type="button" id="btn1" value="全选">

   <input type="button" id="btn2" value="取消全选">

   <input type="button" id="btn3" value="选中所有奇数">

   <input type="button" id="btn4" value="反选">

   <input type="button" id="btn5" value="获得选中的所有值">

代码
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

 <HEAD>

  <TITLE> New Document </TITLE>

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

    <SCRIPT LANGUAGE="JavaScript" src="http://www.cnjquery.com/demo/jquery.js"></script>

  <SCRIPT LANGUAGE="JavaScript">

  <!--

   $("document").ready(function(){

    

    $("#btn1").click(function(){

     

    $("[name='checkbox']").attr("checked",'true');//全选

  

    })

       $("#btn2").click(function(){

     

    $("[name='checkbox']").removeAttr("checked");//取消全选

  

    })

    $("#btn3").click(function(){

     

    $("[name='checkbox']:even").attr("checked",'true');//选中所有奇数

  

    })

    $("#btn4").click(function(){

     

    $("[name='checkbox']").each(function(){

     

   

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

   {

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

    

   }

   else

   {

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

    

   }

   

    })

  

    })

     $("#btn5").click(function(){

    var str="";

    $("[name='checkbox'][checked]").each(function(){

     str+=$(this).val()+""r"n";

   //alert($(this).val());

    })

   alert(str);

    })

   })

  //-->

  </SCRIPT>

  

 </HEAD>

 <BODY>

 <form name="form1" method="post" action="">

   <input type="button" id="btn1" value="全选">

   <input type="button" id="btn2" value="取消全选">

   <input type="button" id="btn3" value="选中所有奇数">

   <input type="button" id="btn4" value="反选">

   <input type="button" id="btn5" value="获得选中的所有值">

   <br>

   <input type="checkbox" name="checkbox" value="checkbox1">

   checkbox1

   <input type="checkbox" name="checkbox" value="checkbox2">

   checkbox2

   <input type="checkbox" name="checkbox" value="checkbox3">

   checkbox3

   <input type="checkbox" name="checkbox" value="checkbox4">

   checkbox4

   <input type="checkbox" name="checkbox" value="checkbox5">

   checkbox5

   <input type="checkbox" name="checkbox" value="checkbox6">

   checkbox6

   <input type="checkbox" name="checkbox" value="checkbox7">

   checkbox7

   <input type="checkbox" name="checkbox" value="checkbox8">

 checkbox8

 </form>

 

三、 jquery判断checkbox是否被选中

在html的checkbox里,选中的话会有属性checked="checked"。

如果用一个checkbox被选中,alert这个checkbox的属性"checked"的值alert($"#xxx".attr("checked")),会打印出"true"",而不是checked"!
如果没被选中,打印出的是"undefined"。

不要尝试去做这样的判断:if($"#xxx".attr("checked")=="true")或者if($"#xxx".attr("checked")=='checked')
应该是if($("#checkbox1").attr("checked")==true)
全选和全不选函数

function checkAll(){

   if($("#checkbox1").attr("checked")==true){

    $("input[name='xh']").each(function() {

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

    });

   }else {

    $("input[name='xh']").each(function() {

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

    });

   }

  }

四、JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值
JQuery是一个非常容易上手的框架,但是有很多东西需要我们深入学习的。

判断checkbox是否被选中网上有选多种写法,这里有一种方法,个人觉得

比较方便。

因为比较简单,没什么技术含量,直接代码

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>JQuery 判断checkbox是否选中,checkbox全选,获取checkbox选中值</title>

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.6.4.min.js" ></script>

<script type="text/javascript">

$(function(){

      /*------------

        全选/全不选

        ------------*/

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

         //判断apple是否被选中

         var bischecked=$('#cboxchecked').is(':checked');

         var fruit=$('input[name="fruit"]');

         bischecked?fruit.attr('checked',true):fruit.attr('checked',false);

         });

         /*-------------

            获取选中值

          -------------*/

        $('#btn_submit').submit(function(){

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

                var sfruit=$(this).val();

                alert(sfruit);

                });

                return false;

            });

    })

</script>

</head>

 

<body>

<form action="">

  <input type="checkbox"  id="cboxchecked" />

  <label for="cboxchecked">全选/全不选</label>

  <br />

  <br />

  <input type="checkbox"  id="cboxapple" name="fruit" value="apple" />

  <label for="apple">Apple</label>

  <input type="checkbox"  id="cboxorange" name="fruit" value="orange" />

  <label for="orange">Orange</label>

  <input type="checkbox"  id="cboxbanana" name="fruit" value="banana" />

  <label for="banana">Banana</label>

  <input type="checkbox"  id="cboxgrapes" name="fruit" value="grapes" />

  <label for="grapes">Grapes</label>

  <br />

  <br />

  <input type="submit" id="btn_submit" value="submit" />

</form>

</body>

</html>
Javascript 相关文章推荐
图片上传插件jquery.uploadify详解
Nov 15 Javascript
Jquery EasyUI中弹出确认对话框以及加载效果示例代码
Feb 13 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
深入浅析AngularJS和DataModel
Feb 16 Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
Vue集成Iframe页面的方法示例
Dec 12 Javascript
javaScript动态添加Li元素的实例
Feb 24 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
mpvue写一个CPASS小程序的示例
Sep 04 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
Jul 30 Javascript
window.onload与$(document).ready()的区别分析
May 30 #Javascript
JQuery给网页更换皮肤的方法
May 30 #Javascript
jQuery实现给页面换肤的方法
May 30 #Javascript
js获取滚动距离的方法
May 30 #Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 #Javascript
Javascript实现div层渐隐效果的方法
May 30 #Javascript
JQuery+CSS实现图片上放置按钮的方法
May 29 #Javascript
You might like
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
Javascript 类、命名空间、代码组织代码
2011/07/31 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
javascript实现当前页导航激活的方法
2015/02/27 Javascript
JavaScript中String.match()方法的使用详解
2015/06/06 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
一系列Bootstrap导航条使用方法分享
2016/04/29 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
微信小程序使用车牌号输入法的示例代码
2019/08/20 Javascript
JS回调函数简单易懂的入门实例分析
2019/09/29 Javascript
微信小程序 (地址选择1)--选取搜索地点并显示效果
2019/12/17 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
使用vue实现HTML页面生成图片的方法
2020/03/12 Javascript
jquery简易手风琴插件的封装
2020/10/13 jQuery
[03:14]DOTA2斧王 英雄基础教程
2013/11/26 DOTA
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
Django实现的自定义访问日志模块示例
2017/06/23 Python
Python清空文件并替换内容的实例
2018/10/22 Python
python用插值法绘制平滑曲线
2021/02/19 Python
在python中用print()输出多个格式化参数的方法
2019/07/16 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
浅谈keras的深度模型训练过程及结果记录方式
2020/01/24 Python
python字典和json.dumps()的遇到的坑分析
2020/03/11 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
python集合的新增元素方法整理
2020/12/07 Python
英国家庭、花园、汽车和移动解决方案:Easylife Group
2018/05/23 全球购物
经典优秀毕业生求职信范文分享
2013/12/18 职场文书
家教广告词
2014/03/19 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
环保宣传语大全
2015/07/13 职场文书