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 相关文章推荐
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
jquery解决客户端跨域访问问题
Jan 06 Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 Javascript
javascript的几种继承方法介绍
Mar 22 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
JS实现指定区域的全屏显示功能示例
Apr 25 Javascript
Node.js实现简单的爬取的示例代码
Jun 25 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 Javascript
three.js 实现露珠滴落动画效果的示例代码
Mar 01 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调用Webservice思路及源码分享
2014/06/04 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php源码 fsockopen获取网页内容实例详解
2016/09/24 PHP
PHP严重致命错误处理:php Fatal error: Cannot redeclare class or function
2017/02/05 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
JS启动应用程序的一个简单例子
2008/05/11 Javascript
了解jQuery技巧来提高你的代码
2010/01/08 Javascript
js图片向右一张张滚动效果实例代码
2013/11/23 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
详解Vue.js使用Swiper.js在iOS
2018/09/10 Javascript
微信小程序仿通讯录功能
2020/04/09 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
Python转换HTML到Text纯文本的方法
2015/01/15 Python
在Python下进行UDP网络编程的教程
2015/04/29 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python统计文章中单词出现次数实例
2020/02/27 Python
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
高三化学教学反思
2016/02/22 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
解决springboot druid数据库连接失败后一直重连的方法
2022/04/19 Java/Android