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 相关文章推荐
基于Jquery实现表格动态分页实现代码
Jun 21 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
jQuery中get()方法用法实例
Dec 27 Javascript
javaScript中with函数用法实例分析
Jun 08 Javascript
JS+CSS实现下拉列表框美化效果(3款)
Aug 15 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
Jun 16 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
微信小程序 搜索框组件代码实例
Sep 06 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里的JS打印函数
2006/10/09 PHP
laravel安装和配置教程
2014/10/29 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
JQuery与iframe交互实现代码
2009/12/24 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
Angularjs注入拦截器实现Loading效果
2015/12/28 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
Javascript中作用域的详细介绍
2016/10/06 Javascript
前端框架学习总结之Angular、React与Vue的比较详解
2017/03/14 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
NVM安装nodejs的方法实用步骤
2019/01/16 NodeJs
微信小程序picker组件关于objectArray数据类型的绑定方法
2019/03/13 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
js 函数性能比较方法
2020/08/24 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
python list排序的两种方法及实例讲解
2017/03/20 Python
python实现自主查询实时天气
2018/06/22 Python
pandas 根据列的值选取所有行的示例
2018/11/07 Python
详解python3中用HTMLTestRunner.py报ImportError: No module named 'StringIO'如何解决
2019/08/27 Python
快速解决jupyter启动卡死的问题
2020/04/10 Python
树莓派升级python的具体步骤
2020/07/05 Python
巧用CSS3 border实现图片遮罩效果代码
2012/04/09 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
创意爱尔兰礼物:Creative Irish Gifts
2020/01/29 全球购物
元旦促销方案
2014/03/15 职场文书
银行柜员求职自荐书
2014/06/18 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
煤矿隐患排查制度
2015/08/05 职场文书
幼儿园师德师风心得体会
2016/01/12 职场文书
2019年自助餐厅创业计划书模板
2019/08/22 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python