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 ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
Oct 12 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
微信小程序实现保存图片到相册功能
Nov 30 Javascript
Vue Extends 扩展选项用法完整实例
Sep 17 Javascript
浅谈vuex中store的命名空间
Nov 08 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
Javascript中的解构赋值语法详解
Apr 02 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
PHP实现今天是星期几的几种写法
2013/09/26 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
php中JSON的使用方法
2015/04/30 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
JavaScript对象、属性、事件手册集合方便查询
2010/07/04 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
js将字符串转成正则表达式的实现方法
2013/11/13 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
从数据库读取数据后将其输出成html标签的三种方法
2014/10/13 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
js 点击a标签 获取a的自定义属性方法
2016/11/21 Javascript
mpvue构建小程序的方法(步骤+地址)
2018/05/22 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
Python3 伪装浏览器的方法示例
2017/11/23 Python
目前最全的python的就业方向
2018/06/05 Python
python 剪切移动文件的实现代码
2018/08/02 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
python 基于Apscheduler实现定时任务
2020/12/15 Python
python实现无边框进度条的实例代码
2020/12/30 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
英国婴儿及儿童产品商店:TigerParrot
2019/03/04 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
甜点店创业计划书
2014/01/27 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
在校大学生自我评价范文
2014/09/12 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
Python Flask搭建yolov3目标检测系统详解流程
2021/11/07 Python