表单的全选、反选操作一

  1. <form method="post" action="">
  2. 你爱好的运动是?<input type="checkbox" id="CheckedAll" />全选/全不选<br/>
  3. <input type="checkbox" name="items" value="足球"/>足球
  4. <input type="checkbox" name="items" value="篮球"/>篮球
  5. <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  6. <input type="checkbox" name="items" value="乒乓球"/>乒乓球<br/>
  7. <input type="button" id="send" value="提 交"/>
  8. </form>
  9. <script>
  10. $("#CheckedAll").click(function(){
  11. var checked =$(this).prop("checked")
  12. //console.log(checked)
  13. $('[name=items]:checkbox').prop("checked", checked );
  14. $('[name=items]:checkbox').prop("checked", this.checked ); //所有checkbox跟着全选的checkbox走。
  15. });
  16. </script>

表单的全选、反选操作二

  1. <form method="post" action="">
  2. 你爱好的运动是?
  3. <br/>
  4. <input type="checkbox" name="items" value="足球"/>足球
  5. <input type="checkbox" name="items" value="篮球"/>篮球
  6. <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  7. <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  8. <br/>
  9. <input type="button" id="CheckedAll" value="全 选"/>
  10. <input type="button" id="CheckedNo" value="全不选"/>
  11. <input type="button" id="CheckedRev" value="反 选"/>
  12. <input type="button" id="send" value="提 交"/>
  13. </form>
  14. //全选
  15. $("#CheckedAll").click(function(){
  16. $('[name=items]:checkbox').prop('checked', true);
  17. });
  18. //全不选
  19. $("#CheckedNo").click(function(){
  20. $('[type=checkbox]:checkbox').prop('checked', false);
  21. });
  22. //反选
  23. $("#CheckedRev").click(function(){
  24. $('[name=items]:checkbox').each(function(){
  25. //此处用JQ写法颇显啰嗦。体现不出JQ飘逸的感觉。
  26. //$(this).prop("checked", !$(this).prop("checked"));
  27. //直接使用JS原生代码,简单实用
  28. this.checked=!this.checked;
  29. });
  30. });

补充知识attr与prop

在表单中,有的浏览器只要写disabled,checked就可以了,而有的要写成disabled = “disabled”,checked=”checked”。

比如用attr(“checked”)获取checkbox的checked属性时选中的时候可以取到值,值为”checked”但没选中获取值就是undefined。

jq提供新的方法“prop”来获取这些属性,就是来解决这个问题的,以前我们使用attr获取checked属性时返回”checked”和””,现在使用prop方法获取属性则统一返回true和false。

那么,什么时候使用attr(),什么时候使用prop()?

1.添加属性名称该属性就会生效应该使用prop();

2.是有true,false两个属性使用prop() 如 checked, selected 或者 disabled;

3.其他则使用attr();

jQuery中表单的常用操作(全选、反选)的更多相关文章

  1. 简单的jquery表单验证+添加+删除+全选/反选

    //布局 <body> <h4><a href="#">首页</a>><a href="#"> ...

  2. Dom操作--全选反选

    我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...

  3. jquery checkbox选中状态以及实现全选反选

    jquery1.6以下版本获取checkbox的选中状态: $('.ck').attr('checked'); $('.ck').attr('checked',true);//全选 $('.ck'). ...

  4. JQuery 更改属性 JQ对象循环 each 全选反选 三元运算

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

  5. jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

    一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...

  6. jquery、js操作checkbox全选反选

    全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...

  7. BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  8. jQuery全选反选实例

    1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...

  9. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

随机推荐

  1. C#中工厂模式的作用

    1.比如,主要用于对扩展性有要求的功能. 以简单工厂为例: 接口Fun有三个实现 class FunA FunB FunC工厂 class Fac {   public static Fun getF ...

  2. 调停者模式Mediator(中介者模式)详解

    原文链接:https://www.cnblogs.com/java-my-life/archive/2012/06/20/2554024.html 在阎宏博士的<JAVA与模式>一书中开头 ...

  3. 数据结构6: 静态链表及C语言实现

    本节继续介绍线性表的另外一种链式表示——静态链表.(前面介绍的链表称为 动态链表 ). 逻辑结构上相邻的数据元素,存储在指定的一块内存空间中,数据元素只允许在这块内存空间中随机存放,这样的存储结构生成 ...

  4. UESTC 趣味赛命题报告E

    https://lutece.xyz/contest/detail/10/ 题目很简单,套路题: 求n个数中选k个数使得gcd最大: 很容易想到,我们只需要将因子分解出来然后计数即可: (只是这个id ...

  5. Codeforces Round #521 (Div. 3) C. Good Array

    C. Good Array time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  6. Qt 学习之路 2(17):文件对话框

    Home / Qt 学习之路 2 / Qt 学习之路 2(17):文件对话框 Qt 学习之路 2(17):文件对话框  豆子  2012年9月24日  Qt 学习之路 2  85条评论 在前面的章节中 ...

  7. react 的理念

    命名式的编程方式: 命名式的编程方式,我们会有百分之六七十都在进行dom的操作. 1.声名式的开发: react是面向数据开发的,react是根据这个数据自动构建这个网站,可以把数据理解成图纸,rea ...

  8. Mybatis学习笔记(七) —— 关联查询

    一.一对多查询 需求:查询所有订单信息,关联查询下单用户信息. 注意:因为一个订单信息只会是一个人下的订单,所以从查询订单信息出发关联查询用户信息为一对一查询.如果从用户信息出发查询用户下的订单信息则 ...

  9. C++_引用变量探究

    什么是引用 引用变量是已定义变量的别名. 如何定义引用变量: int rats; int & rodents = rats; 其中&不失地址运算符,而是类型标识符的一部分.就行声明ch ...

  10. C语言文件I/O和标准I/O函数

    读取/写入  相对于文件而言 输入/输出 相对于程序/内存而言 一切皆文件,键盘.显示屏也是文件,只不过是特殊的标准文件: 标准文件:标准输入.标准输出.标准错误:---->对应的文件指针:st ...