jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码


Posted in Javascript onFebruary 21, 2014

jQuery判断checkbox(复选框)是否被选中:
if($("#id").attr("checked")==true)

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(复选框)是否被选中以及全选、反选</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
<!--
$("document").ready(function(){
 $("#all").click(function(){   
  if(this.checked){   
   $("input[name='checkbox']").each(function(){this.checked=true;});
   $("#btn1").attr("value","反选");   
  }else{   
   $("input[name='checkbox']").each(function(){this.checked=false;});   
   $("#btn1").attr("value","全选"); 
  }   
 }); $("#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="";
  //$("input:checkbox[name='checkbox']:checked").each(function(){//可以
  $("[name='checkbox'][checked]").each(function(){
   str+=$(this).val()+"\r\n";
  });
  alert(str);
 });
});

//-->
</script>
</head>
<body>
    <form name="form1" method="post" action="">
     <input type="checkbox" id="all" name="all">
        <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>
</body>
</html>
Javascript 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
IE6下通过a标签点击切换图片的问题
Nov 14 Javascript
js对象关系图 方便dom操作
Mar 18 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
javascript感应鼠标图片透明度显示的方法
Feb 24 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
windows下vue-cli及webpack搭建安装环境
Apr 25 Javascript
Require.js的基本用法详解
Jul 03 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
JavaScript中CreateTextFile函数
Aug 30 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 #Javascript
jquery五角星评分插件示例分享
Feb 21 #Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 #Javascript
jquery自定义滚动条插件示例分享
Feb 21 #Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 #Javascript
利用Jquery实现可多选的下拉框
Feb 21 #Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 #Javascript
You might like
php 来访国内外IP判断代码并实现页面跳转
2009/12/18 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
2014/10/31 Javascript
Nodejs学习笔记之Global Objects全局对象
2015/01/13 NodeJs
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
JS倒计时实例_天时分秒
2017/08/22 Javascript
Vue使用vue-cli创建项目
2017/09/01 Javascript
JavaScript函数定义方法实例详解
2019/03/05 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
js实现前端界面导航栏下拉列表
2020/08/27 Javascript
JavaScript 防盗链的原理以及破解方法
2020/12/29 Javascript
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
[00:44]华丽开场!DOTA2勇士令状带来全新对阵画面
2019/05/15 DOTA
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
Python使用pygame模块编写俄罗斯方块游戏的代码实例
2015/12/08 Python
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
Python 中字符串拼接的多种方法
2018/07/30 Python
在Python IDLE 下调用anaconda中的库教程
2020/03/09 Python
css3实现简单的白云飘动背景特效
2020/10/28 HTML / CSS
英国最大的在线奢侈手表零售商:Jura Watches
2018/01/29 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
小学生环保倡议书
2014/05/15 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
2014年共青团工作总结
2014/12/10 职场文书
我的法兰西岁月观后感
2015/06/09 职场文书
消费者理赔投诉书
2015/07/02 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
《角的初步认识》教学反思
2016/02/17 职场文书