jquery实现全选和全不选功能效果的实现代码【推荐】


Posted in Javascript onMay 05, 2016

网上好多代码都是错的

<!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实现全选和全不选功能效果的实现代码【推荐】</title>
</head>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function () {

    $("#checkedAll").click(function () {

      //alert("aa");


      if ($(this).attr("checked")) { // 全选 

        $("input[name='checkbox_name']").each(function () {
          $(this).attr("checked", true);
        });
      }
      else { // 取消全选 

        $("input[name='checkbox_name']").each(function () {
          $(this).attr("checked", false);
        });
      }
    });

  }); 

</script> 

<body>
<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"/>全选/取消全选
</body>
</html>

以上这篇jquery实现全选和全不选功能效果的实现代码【推荐】就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js报错 Object doesn't support this property or method的原因分析
Mar 31 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
浅谈javascript中this在事件中的应用
Feb 15 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
jQuery对象的链式操作用法分析
May 10 Javascript
jquery基本选择器匹配多个元素的实现方法
Sep 05 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
在antd4.0中Form使用initialValue操作
Nov 02 Javascript
jquery实现全选功能效果的实现代码
May 05 #Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 #Javascript
animate 实现滑动切换效果【实例代码】
May 05 #Javascript
JavaScript中各种引用类型的常用操作方法小结
May 05 #Javascript
Sea.JS知识总结
May 05 #Javascript
在Node.js中使用Javascript Generators详解
May 05 #Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
May 05 #Javascript
You might like
PHP句法规则详解 入门学习
2011/11/09 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
php使用file函数、fseek函数读取大文件效率对比分析
2016/11/04 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
Laravle eloquent 多对多模型关联实例详解
2017/11/22 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
2016/05/15 Javascript
JavaScript实现三级联动菜单实例代码
2017/06/26 Javascript
layui radio性别单选框赋值方法
2018/08/15 Javascript
Vue实现点击显示不同图片的效果
2019/08/10 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
Python内置函数dir详解
2015/04/14 Python
理解Python中的类与实例
2015/04/27 Python
全面了解Nginx, WSGI, Flask之间的关系
2018/01/09 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
美国NBA官方商店:NBA Store
2019/04/12 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
夜大毕业自我鉴定
2013/10/11 职场文书
化学教学随笔感言
2014/02/19 职场文书
职业女性的职业规划
2014/03/04 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
电台编导求职信
2014/05/06 职场文书
不同意离婚上诉状
2015/05/23 职场文书
2016年春节问候语
2015/11/11 职场文书
2016年小学教师政治学习心得体会
2016/01/23 职场文书
2019年大学推荐信
2019/06/24 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers