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 相关文章推荐
仿163填写邮件地址自动显示下拉(无优化)
Nov 05 Javascript
JS 在指定数组中随机取出N个不重复的数据
Jun 10 Javascript
微信企业号开发之微信考勤Cookies的使用
Sep 11 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
JS原型、原型链深入理解
Feb 27 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
May 30 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
Feb 08 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
仿iPhone通讯录制作小程序自定义选择组件的实现
May 23 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 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
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
php提高网站效率的技巧
2015/09/29 PHP
示例详解Laravel重置密码代码重构
2016/08/10 PHP
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
2011/08/09 Javascript
javascript引用赋值(地址传值)用法实例
2015/01/13 Javascript
Vue自定义指令介绍(2)
2016/12/08 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
详解windows下vue-cli及webpack 构建网站(二)导入bootstrap样式
2017/06/17 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
Python脚本实现网卡流量监控
2015/02/14 Python
用Python实现命令行闹钟脚本实例
2016/09/05 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python Logging 日志记录入门学习
2018/06/02 Python
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
PyCharm配置mongo插件的方法
2018/11/30 Python
Python中三元表达式的几种写法介绍
2019/03/04 Python
css3类选择器之结合元素选择器和多类选择器用法
2017/03/09 HTML / CSS
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
爱奇艺VIP会员:大剧抢先看
2018/07/11 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
Loreto Gallo英国:欧洲领先的在线药房
2021/01/21 全球购物
Prototype如何更新局部页面
2013/03/03 面试题
教师个人鉴定材料
2014/02/08 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
2014年接待工作总结
2014/11/26 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
大学生暑期社会实践的个人总结!
2019/07/17 职场文书
Python爬虫入门案例之回车桌面壁纸网美女图片采集
2021/10/16 Python
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技