js与jQuery实现checkbox复选框全选/全不选的方法


Posted in Javascript onJanuary 05, 2016

本文实例讲述了js与jQuery实现checkbox复选框全选/全不选的方法。分享给大家供大家参考,具体如下:

先来看看JavaScript实现checkbox复选框全选/全不选的方法。这应该是一个比较实用的前端技巧吧,很多时候我们都需要点击一个checkbox,然后将所有的复选框自动全部选中,比如新浪邮箱中,一些CMS系统的后台中,使用本JS效果后,会大大增强了操作体验,那么究竟是如何实现这一功能的呢?别着急,跟我一步一步实现。

我们先把那些带复选框的列表弄好,还没加全选、全不选时候的状态,大概是这样的:

<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>
<input type=checkbox name=chk>

然后我们在列表的旁边放一个控制checkbox的Checkbox:

全选:

<input type=checkbox onclick=sel('chk')>

下面是定义点击全选的checkBox后所要执行的JS代码,用JS遍历所有checkbox,并改变checkbox的状态:

<script language="javascript">
 function sel(a){
 o=document.getElementsByName(a)
 for(i=0;i<o.length;i++)
 o[i].checked=event.srcElement.checked
 }
</script>

下面还有一种实现JS全选、反选的功能,直接帖代码了,自己整理吧。

<input type=checkbox name=m>
<input type=checkbox name=m>
<input type=checkbox name=m>
<!--放一个控制全选的按钮-->
全选<input type="checkbox" value="1" onclick="mm(this)">
<script language=javascript>
<!--JS部分-->
function mm(o)
{
  var a = document.getElementsByName("m");
  for (var i=0;i<a.length;i++){
    a[i].checked = o.checked;
  }
}
</script>

两种方法任选一吧,都比较容易。

下面再来介绍一下jQuery实现checkbox复选框全选/全不选的方法。虽然使用JavaScript很简单就可以实现,但是代码就非常的麻烦了。

下面我来给各位朋友介绍介绍使用jQuery具体的操作方法。

jQuery.attr  获取/设置对象的属性值,如:

$("input[name='chk_list']").attr("checked"); //读取所有name为'chk_list'对象的状态(是否选中)
$("input[name='chk_list']").attr("checked",true); //设置所有name为'chk_list'对象的checked为true

再如:

$("#img_1").attr("src","test.jpg"); //设置ID为img_1的<img>src的值为'test.jpg'
$("#img_1").attr("src"); //读取ID为img_1的<img>src值

例1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <meta charset="utf-8">
<script src="jquery-1.7.2.min.js"></script>
<script>
 $(document).ready(function(){
 //是否选择进行判断
 $(".btn").click(function(){
  if ($("input:checkbox:checked").length == 0)
  {
  alert('你未选择爱好');
  }
 });
 //进行反选
  $(".btn1").click(function(){
  $("input[type=checkbox]").each(function(){
  if ($(this).attr("checked"))
  {
   $(this).attr("checked",false);
  }else{
   $(this).attr("checked",true);
  }
  });
  });
  });
 </script>
 </head>
<body>
爱好:
<input type="checkbox" name="fav[]" value="read">阅读
<input type="checkbox" name="fav[]" value="music">音乐
<input type="checkbox" name="fav[]" value="sport">体育<br />
<input type="button" name="btn" class="btn" value="提交">
<input type="button" name="btn1" class="btn1" value="反选">
</body>
</html>

例2:

<script src="jquery-1.3.2.min.js"></script>
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_1″ />1<br /> <input type="checkbox" name="checkbox_name[]" id="checkbox_name_2″ />2<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_3″ />3<br />
<input type="checkbox" name="checkbox_name[]" id="checkbox_name_4″ />4<br />
<input type="checkbox" name="checkedAll" id="checkedAll"/>全选/取消全选
<script type="text/javascript">
<!--
$(function() {
$("#checkedAll").click(function() {
if ($(this).attr("checked") == true) { // 全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", true);
});
} else { // 取消全选
$("input[name='checkbox_name[]']").each(function() {
$(this).attr("checked", false);
});
}
});
});
// -->
</script>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
Js中setTimeout()和setInterval() 何时被调用执行的用法
Apr 12 Javascript
javascript文件中引用依赖的js文件的方法
Mar 17 Javascript
Javascript实现Web颜色值转换
Feb 05 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)
Jan 08 Javascript
微信小程序三级联动选择器使用方法
May 19 Javascript
使用typescript开发angular模块并发布npm包
Apr 19 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
详解JavaScript 作用域
Jul 14 Javascript
简述jQuery ajax的执行顺序
Jan 05 #Javascript
JavaScript类型系统之正则表达式
Jan 05 #Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 #Javascript
jQuery Mobile弹出窗、弹出层知识汇总
Jan 05 #Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 #Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 #Javascript
浅谈javascript 函数表达式和函数声明的区别
Jan 05 #Javascript
You might like
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
深入解析PHP垃圾回收机制对内存泄露的处理
2013/06/14 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
php计算税后工资的方法
2015/07/28 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
js身份证验证超强脚本
2008/10/26 Javascript
node.js中的buffer.fill方法使用说明
2014/12/14 Javascript
玩转JavaScript OOP - 类的实现详解
2016/06/08 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
2016/06/28 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
2017/03/09 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
微信小程序组件之srcoll-view的详解
2017/10/19 Javascript
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Python图像处理之颜色的定义与使用分析
2019/01/03 Python
利用python实现对web服务器的目录探测的方法
2019/02/26 Python
Python hashlib模块实例使用详解
2019/12/24 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
python基于win32api实现键盘输入
2020/12/09 Python
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
研究生求职推荐信范文
2013/11/30 职场文书
护理学专业推荐信
2013/12/03 职场文书
银行职业规划书范文
2013/12/28 职场文书
八年级数学教学反思
2014/01/31 职场文书
婚礼司仪主持词
2014/03/14 职场文书
亮化工程实施方案
2014/03/17 职场文书
行政监察建议书
2014/05/19 职场文书
学雷锋活动总结报告
2014/06/26 职场文书
创先争优个人承诺书
2014/08/30 职场文书
科技馆观后感
2015/06/08 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers