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代码小结
Oct 14 Javascript
jQuery学习2 选择器的使用说明
Feb 07 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
Sep 15 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
Nov 21 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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设计模式之调解者模式的深入解析
2013/06/13 PHP
php实现计数器方法小结
2015/01/05 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php自定义函数实现JS的escape的方法示例
2016/07/07 PHP
PHP+mysql实现从数据库获取下拉树功能示例
2017/01/06 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
JavaScript之引用类型介绍
2012/08/10 Javascript
JS实现div内部的文字或图片自动循环滚动代码
2013/04/19 Javascript
js冒泡法和数组转换成字符串示例代码
2013/08/14 Javascript
javascript 回调函数详解
2014/11/11 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
JavaScript纯色二维码变成彩色二维码
2020/07/23 Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
2017/07/18 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
2018/10/12 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
详解微信小程序开发用户授权登陆
2019/04/24 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
python 按照固定长度分割字符串的方法小结
2018/04/30 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
Python 获取项目根路径的代码
2019/09/27 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
如何使用scrapy中的ItemLoader提取数据
2020/09/30 Python
纯CSS3实现移动端展开和收起效果的示例代码
2020/04/26 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
印度领先的眼镜电子商务网站:Lenskart
2019/12/16 全球购物
班级旅游计划书
2014/05/03 职场文书
暑期培训班招生方案
2014/08/26 职场文书
2015年双拥工作总结
2015/04/08 职场文书
亮剑观后感500字
2015/06/05 职场文书
Python使用DFA算法过滤内容敏感词
2022/04/22 Python