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 相关文章推荐
url 编码 js url传参中文乱码解决方案
Apr 11 Javascript
YUI模块开发原理详解
Nov 18 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jquery弹出框插件jquery.ui.dialog用法分析
Aug 20 Javascript
jquery组件WebUploader文件上传用法详解
Oct 23 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
Feb 15 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
图文讲解vue的v-if使用方法
Feb 11 Javascript
javascript删除数组元素的七个方法示例
Sep 09 Javascript
Vue引入Stylus知识点总结
Jan 16 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
JavaScript实现Sleep函数的代码
2007/03/04 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
2010/10/01 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
JavaScript中getUTCMinutes()方法的使用详解
2015/06/10 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
2018/08/14 Javascript
js类的继承定义与用法分析
2019/06/21 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Python中datetime模块参考手册
2017/01/13 Python
简单实现python画圆功能
2018/01/25 Python
Python 3.x 安装opencv+opencv_contrib的操作方法
2018/04/02 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
详解python中index()、find()方法
2019/08/29 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
python3排序的实例方法
2020/10/20 Python
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
市场营销专业个人自荐信格式
2013/09/21 职场文书
小孩百日宴答谢词
2014/01/15 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
公司授权委托书
2014/10/17 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python