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 相关文章推荐
javascript笔试题目附答案@20081025_jb51.net
Oct 26 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
关于div自适应高度/左右高度自适应一致的js代码
Mar 22 Javascript
js onload处理html页面加载之后的事件
Oct 30 Javascript
深入理解JS中的变量及作用域、undefined与null
Mar 04 Javascript
VS2008中使用JavaScript调用WebServices
Dec 18 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
EasyUI中在表单提交之前进行验证
Jul 19 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 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文件大小格式化函数合集
2014/03/10 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
推荐自用 Javascript 缩图函数 (onDOMLoaded)……
2007/10/23 Javascript
javascript String 的扩展方法集合
2008/06/01 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
get(0).tagName获得作用标签示例代码
2014/10/08 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
浅谈javascript对象模型和function对象
2014/12/26 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
2018/02/11 Javascript
详解基于Wepy开发小程序插件(推荐)
2019/08/01 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
用Python写一段用户登录的程序代码
2018/04/22 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
实例讲解使用HTML5 Canvas绘制阴影效果的方法
2016/03/25 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
三星印度官网:Samsung印度
2019/08/03 全球购物
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
设计模式的基本要素是什么
2014/04/21 面试题
给客户的道歉信
2014/01/13 职场文书
食品质检员岗位职责
2015/04/08 职场文书
离婚起诉书怎么写
2015/05/19 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
python glom模块的使用简介
2021/04/13 Python
PHP实现rar解压读取扩展包小结
2021/06/03 PHP
Win11怎么进入安全模式?Windows 11进入安全模式的方法
2021/11/21 数码科技
Golang 并发下的问题定位及解决方案
2022/03/16 Golang