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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 Javascript
js实现表格字段排序
Feb 19 Javascript
jQuery图片轮播实现并封装(一)
Dec 03 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
原生js仿浏览器滚动条效果
Mar 02 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
May 10 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
Sep 12 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
对angularjs框架下controller间的传值方法详解
Oct 08 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 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
40个迹象表明你还是PHP菜鸟
2008/09/29 PHP
php实现mysql封装类示例
2014/05/07 PHP
php中多维数组按指定value排序的实现代码
2014/08/19 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP 加密 Password Hashing API基础知识点
2020/03/02 PHP
Web层改进II-用xmlhttp 无声息提交复杂表单
2007/01/22 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
基于JS实现数字+字母+中文的混合排序方法
2016/06/06 Javascript
domReady的实现案例
2016/11/23 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
2017/04/05 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
2020/02/12 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
python实现逻辑回归的方法示例
2017/05/02 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Python tkinter实现图片标注功能(完整代码)
2019/12/08 Python
基于Python+QT的gui程序开发实现
2020/07/03 Python
如何在pycharm中安装第三方包
2020/10/27 Python
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
STAY JAPAN台湾:预订日本民宿
2018/07/22 全球购物
自我鉴定三原则
2014/01/13 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
法院四风对照检查材料思想汇报
2014/10/06 职场文书
2014年效能监察工作总结
2014/11/21 职场文书
2019年市场部个人述职报告(三篇)
2019/10/23 职场文书