<!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>用iQuery实现全选与反选</title>

</head>

 <!--script src="1、jquery实现图片轮播示例/js/jquery-1.11.3/jquery.min.js"></script-->

 <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

 <script type="text/javascript">

   $(document).ready(function() {

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

          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"/><br/>

  <input type="checkbox" name="checkbox_name" id="checkbox_name_2"/><br/>

  <input type="checkbox" name="checkbox_name" id="checkbox_name_3"/><br/>

  <input type="checkbox" name="checkbox_name" id="checkbox_name_4"/><br/>

  <input type="checkbox" name="checkboxAll" id="checkedAll"/>全选/取消全选

</body>

</html>

jQuery-实现全选与反选的更多相关文章

  1. jquery实现全选、反选、不选

    <!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8&quo ...

  2. （转载）jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...

  3. 利用JQuery实现全选和反选的几种方法

    前面介绍了利用JavaScript实现全选功能,其中也有要注意的几点,现在讲解下在JQuery怎么实现全选和反选,下面提供了两种方法实现. 如图:要实现的效果是点击全选框全部选中,再点击全部不选中 方 ...

  4. jQuery实现全选、反选和不选功能

    HTML 我们的页面上有一个歌曲列表,列出多行歌曲名称,并匹配复选框供用户选择,并且在列表下方有一排操作按钮. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 <ul id=&q ...

  5. jquery实现全选，反选，取消的操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jQuery实现全选、反选、删除

    <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...

  7. Jquery，全选，反选，

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. JQuery实现全选、反选和取消功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. javaScript_Demo 全选和反选单选框

    进行单选的全选和反选 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  10. jquery checkbox的相关操作——全选、反选、获得所有选中的checkbox

    1.全选 $("#btn1").click(function(){ $("input[name='checkbox']").attr("checked ...

随机推荐

  1. C# 中从程序中下载Excel模板

    方法一: #region 下载模板 /// <summary> /// 下载模板 /// </summary> /// <param name="sender& ...

  2. Single Number I&& II——还没看，倒过头来再看

    Single Number I Given an array of integers, every element appears twice except for one. Find that si ...

  3. linux下用xampp安装php集成环境，并修改各自端口号

    一:安装xampp 1.到官网下载linux版xampp    https://www.apachefriends.org/zh_cn/index.html 下载后为:xampp-linux-x64- ...

  4. git 命令小结

    一.git 版本管理 1.git log: 获取当前版本之前的所有操作 2.git log --pretty=oneline:获取当前版本的前三和后三个操作 3.git reflog :获取当前项目下 ...

  5. 前端读者 | 前端用户体验-UI动效设计

    本文来自互联网 @羯瑞 整理 UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的. 动效呈现出状态切换的过程,展现了元素之间的逻辑关系, ...

  6. JSTL 1.1与JSTL 1.2之间的区别？如何下载JSTL 1.2?

    JSTL 1.1与JSTL 1.2之间的区别?如何下载JSTL 1.2? JSTL 1.2中不要求standard.jar架包 您可以在Maven中央仓库中找到它们: http://repo2.mav ...

  7. Java数据库连接池-proxool

    连接池技术的思想: 连接复用(高效.安全),避免数据库频繁建立.关闭的开销 --------------------极客学院(参考lulei) 1.配置文件 <proxool> <! ...

  8. 【转载】TabLayout 源码解析

    原文地址:https://github.com/Aspsine/AndroidSdkSourceAnalysis/blob/master/article/TabLayout%E6%BA%90%E7%A ...

  9. 洛谷P1514 引水入城 [搜索，区间DP]

    题目传送门 引水入城 题目描述 在一个遥远的国度,一侧是风景秀美的湖泊,另一侧则是漫无边际的沙漠.该国的行政区划十分特殊,刚好构成一个 N 行×M 列的矩形,如上图所示,其中每个格子都代表一座城市,每 ...

  10. Outlook Font