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 相关文章推荐
根据分辩率调用不同的CSS.
Jan 08 Javascript
Javascript 兼容firefox的一些问题
May 21 Javascript
jQueryUI的Dialog的简单封装
Jun 07 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
JS原型prototype和__proto__用法实例分析
Mar 14 Javascript
Vue-cli打包后如何本地查看的操作
Sep 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新手上路(五)
2006/10/09 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP处理大量表单字段的便捷方法
2015/02/07 PHP
php实现SAE上使用storage上传与下载文件的方法
2015/06/29 PHP
php 问卷调查结果统计
2015/10/08 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
PHP递归的三种常用方式
2019/02/28 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
W3C Group的JavaScript1.8 新特性介绍
2009/05/19 Javascript
使用js获取QueryString的方法小结
2010/02/28 Javascript
jquery高效反选具体实现
2013/05/05 Javascript
理解Javascript闭包
2013/11/01 Javascript
JS清除文本框内容离开在恢复及鼠标离开文本框时触发js的方法
2016/01/12 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
Js经典案例的实例代码
2018/05/10 Javascript
JavaScript ES2019中的8个新特性详解
2019/02/20 Javascript
vue--vuex详解
2019/04/15 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
解决layui的radio属性或别的属性没显示出来的问题
2019/09/26 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
Windows下实现Python2和Python3两个版共存的方法
2015/06/12 Python
Python实现的简单模板引擎功能示例
2017/09/02 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
python对文件目录的操作方法实例总结
2019/06/24 Python
python操作微信自动发消息的实现(微信聊天机器人)
2020/07/14 Python
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
医学生实习自我鉴定
2013/09/27 职场文书
高中地理教学反思
2016/02/19 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
浅谈Python中的正则表达式
2021/06/28 Python