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 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
JavaScript中SQL语句的应用实现
May 04 Javascript
js倒计时小程序
Nov 05 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
Javascript数组Array方法解读
Mar 13 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 Javascript
Vue router配置与使用分析讲解
Dec 24 Vue.js
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
MVC模式的PHP实现
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP中的命名空间相关概念浅析
2015/01/22 PHP
刷新PHP缓冲区为你的站点加速
2015/10/10 PHP
Mac下关于PHP环境和扩展的安装详解
2019/10/17 PHP
laravel 实现根据字段不同值做不同查询
2019/10/23 PHP
javascript验证身份证号
2015/03/03 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
2018/08/29 Javascript
使用mixins实现elementUI表单全局验证的解决方法
2019/04/02 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
Python中list初始化方法示例
2016/09/18 Python
基于Python代码编辑器的选用(详解)
2017/09/13 Python
利用Python进行异常值分析实例代码
2017/12/07 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
幼儿园大班毕业教师寄语
2014/04/03 职场文书
学生会主席演讲稿
2014/04/25 职场文书
师恩难忘教学反思
2014/04/27 职场文书
校园环保标语
2014/06/13 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
护士个人年度总结范文
2015/02/13 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
辩护词格式
2015/05/22 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python