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 相关文章推荐
DOM精简教程
Oct 03 Javascript
用 javascript 实现的点击复制代码
Mar 24 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
Bootstrap3.0建站教程(一)之bootstrap表单元素排版
Jun 01 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
js实现数字递增特效【仿支付宝我的财富】
May 05 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
vue.js input框之间赋值方法
Aug 24 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 Javascript
vue cli 3.x 项目部署到 github pages的方法
Apr 17 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调用wsdl文件类型的接口代码分享
2014/11/19 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
Laravel搭建后台登录系统步骤详解
2016/07/26 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
2017/01/21 Javascript
js实现二级菜单点击显示当前内容效果
2018/04/28 Javascript
基于AngularJs select绑定数字类型的问题
2018/10/08 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
2019/01/02 Javascript
js实现网页随机验证码
2020/10/19 Javascript
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
python实现人脸识别经典算法(一) 特征脸法
2018/03/13 Python
pandas中去除指定字符的实例
2018/05/18 Python
python批量从es取数据的方法(文档数超过10000)
2018/12/27 Python
详解用pyecharts Geo实现动态数据热力图城市找不到问题解决
2019/06/26 Python
Python 函数绘图及函数图像微分与积分
2019/11/20 Python
Python栈的实现方法示例【列表、单链表】
2020/02/22 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
Django使用rest_framework写出API
2020/05/21 Python
10分钟理解CSS3 Grid布局
2018/12/20 HTML / CSS
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
自荐书格式
2013/12/01 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
英语老师推荐信
2014/02/26 职场文书
节约用水倡议书
2014/04/16 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
营业员岗位职责
2015/02/11 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL