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中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
JSON 数据格式介绍
Jan 13 Javascript
jquery.pagination.js 无刷新分页实现步骤分享
May 23 Javascript
JQuery解析HTML、JSON和XML实例详解
Mar 29 Javascript
js实现的点击div区域外隐藏div区域
Jun 30 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
Mar 20 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
Apr 25 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
vue监听键盘事件的相关总结
Jan 29 Vue.js
react中的DOM操作实现
Jun 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实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JS多物体 任意值 链式 缓冲运动
2012/08/10 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
2014/05/12 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JavaScript之WebSocket技术详解
2016/11/18 Javascript
微信小程序 定位到当前城市实现实例代码
2017/02/23 Javascript
微信小程序实现移动端滑动分页效果(ajax)
2017/06/13 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
JS检测浏览器开发者工具是否打开的方法详解
2020/10/02 Javascript
Python编程实现的图片识别功能示例
2017/08/03 Python
Django读取Mysql数据并显示在前端的实例
2018/05/27 Python
运行Python编写的程序方法实例
2020/10/21 Python
Python对excel的基本操作方法
2021/02/18 Python
详解HTML5中ol标签的用法
2015/09/08 HTML / CSS
介绍一下内联、左联、右联
2013/12/31 面试题
公司司机岗位职责范本
2014/03/03 职场文书
国旗下的演讲稿
2014/05/08 职场文书
道德演讲稿
2014/05/21 职场文书
缓刑人员思想汇报500字
2014/09/12 职场文书
2014年国庆节演讲稿
2014/09/19 职场文书
钳工实训报告总结
2014/11/04 职场文书
高中同学会致辞
2015/08/01 职场文书
2016年禁毒宣传活动总结
2016/04/05 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
CSS的class与id常用的命名规则
2021/05/18 HTML / CSS
python b站视频下载的五种版本
2021/05/27 Python
springboot用户数据修改的详细实现
2022/04/06 Java/Android
Python中文分词库jieba(结巴分词)详细使用介绍
2022/04/07 Python