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 相关文章推荐
JavaScript实现禁止后退的方法
Dec 27 Javascript
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
Vue.js实现文章评论和回复评论功能
May 30 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
Oct 25 Javascript
详解Vue源码学习之双向绑定
Apr 10 Javascript
ES6入门教程之let、const的使用方法
Apr 13 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字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
php生成excel文件的简单方法
2014/02/08 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
2015/01/29 Javascript
详解JavaScript中setSeconds()方法的使用
2015/06/11 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
2016/01/23 Javascript
基于jquery实现最简单的选项卡切换效果
2016/05/08 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
2016/10/10 Javascript
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
VueRouter导航守卫用法详解
2017/12/25 Javascript
vue计算属性及使用详解
2018/04/02 Javascript
JavaScript实现连连看连线算法
2019/01/05 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
vue-cli3使用mock数据的方法分析
2020/03/16 Javascript
让你30分钟快速掌握vue3教程
2020/10/26 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python中使用glob和rmtree删除目录子目录及所有文件的例子
2014/11/21 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
简单实现python进度条脚本
2017/12/18 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
亚洲最大的眼镜批发商和零售商之一:Glasseslit
2018/10/08 全球购物
市场部岗位职责
2015/02/12 职场文书
五一放假通知怎么写
2015/08/18 职场文书
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python
基于docker安装zabbix的详细教程
2022/06/05 Servers