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学习笔记 操作jQuery对象 属性处理
Sep 19 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
JS数组的赋值介绍
Mar 10 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
jquery队列函数用法实例
Dec 16 Javascript
JavaScript闭包详解
Feb 02 Javascript
JS实现滑动菜单效果代码(包括Tab,选项卡,横向等效果)
Sep 24 Javascript
详解jQuery中的事件
Dec 14 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
vue2.0 中#$emit,$on的使用详解
Jun 07 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
乱谈我对耳机、音箱的感受
2021/03/02 无线电
php使用ZipArchive提示Fatal error: Class ZipArchive not found in的解决方法
2014/11/04 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
php实现的rc4加密解密类定义与用法示例
2018/08/16 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
用jquery等比例控制图片宽高的具体实现
2014/01/28 Javascript
jQuery实现的在线答题功能
2015/04/12 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
BootStrap轻松实现微信页面开发代码分享
2016/10/21 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
Angular 4依赖注入学习教程之Injectable装饰器(六)
2017/06/04 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
详解React Native顶|底部导航使用小技巧
2017/09/14 Javascript
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
[01:08:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS LGD-CDEC
2014/05/22 DOTA
python实现的各种排序算法代码
2013/03/04 Python
Django的HttpRequest和HttpResponse对象详解
2018/01/26 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
python实现感知机线性分类模型示例代码
2019/06/02 Python
一篇.NET面试题
2014/09/29 面试题
实习心得体会
2014/01/02 职场文书
《风筝》教学反思
2014/04/10 职场文书
门卫岗位职责
2015/02/09 职场文书
联村联户简报
2015/07/21 职场文书
使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)
2021/06/09 Vue.js
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技