jquery实现全选功能

时间:2023-02-14 22:20:05

主要是模拟一些网页中的表格实现全选功能。

<form>

你爱好的运动是:

<input type="checkbox" id="Check"  value="全选/全不选"/>全选/全不选         <br />

<input type="checkbox" name="items" value="足球" />足球

<input type="checkbox" name="items" value="篮球" />篮球

<input type="checkbox" name="items" value="羽毛球" />羽毛球

<input type="checkbox" name="items" value="乒乓球" />乒乓球

</form>

当我们点击全选/全部不选按钮时,下面的checkbox执行相应的操作。

同时反过来,当全选时,下面任意一个checkbox未选中,则全选/全不选按钮也不会被选中。

$('[name=items]:checkbox').click(function () {

var p = $('[name=items]:checkbox');

if(p.filter(':checked').length==p.length)

{                     //alert("Hello World");

$("#Check").attr("checked", true);

} else {

$("#Check").attr("checked", false);

}

});

jquery实现全选功能的更多相关文章

  1. 问题1:jquery实现全选功能,第二次失效(已解决)

    问题:使用了attr("checked",true”)设置子复选框的被选状态,第一次执行功能正常,但第二次失效. 解决方案:将attr("checked",tr ...

  2. jquery与js实现全选功能的区别---2017-05-12

    一.jquery常用的事件 click(),dbclick() focus(),blur() change() keydown(),keypress(),keyup() mousedown(),mou ...

  3. jQuery实现全选与全不选功能

    初始时: 实现功能后: 实现该功能的核心代码: <script> $(function(){ $("#selectBtn").click(function(){ con ...

  4. JQUERY的给Check全选功能

    //给Checkbox提供全选功能 $("#checkall").click(function(){ if(this.checked){ $("input[name='c ...

  5. jQuery实现全选效果【转】

    这是一段用jquery实现全选的代码,主要思路如下: 1.所有的复选框都有单击事件,所有效果都是在单击事件下实现的 2.全选复选框所实现的功能与其他复选选项实现的功能不同,所有在单击事件内做一个判断, ...

  6. jQuery实现全选、全不选、反选

    如图,需要使用jQuery实现全选.全不选.反选功能: 核心代码: 全选 $("#check_all").click(function(){ $("input:check ...

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

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

  8. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

  9. python&colon; jquery实现全选 反选 取消

    引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...

随机推荐

  1. 记一次Redis被攻击的事件

    最近几个月非常忙,所以很少有时间写博客,这几天终于闲了一些,于是就在整理平时的一些笔记.恰好这几天Redis服务器发生了问题,就记录一下. 我司有两款分别是2B和2C的App,类似于阿里旺旺的卖家版和 ...

  2. 关于一些对map和整行读取文件操作

    public static void main(String[] args) { Map<String, String> map = new HashMap<String, Stri ...

  3. JAVA入门

    编译型语言:高级语言代码经过编译器,一次性翻译为特定系统可以硬件执行的机器码,并包装成该平台所识别的可执行程序. 但是不同平台(系统)的机器码不同,所以编译后的可执行程序无法移植到其他平台.但是因为是 ...

  4. QT 中文显示问题

    在QT4 中,要显示中文,都是要这样写: #include <QTextCodec> QTextCodec::setCodecForTr(QTextCodec::codecForLocal ...

  5. Http权威指南笔记&lpar;一&rpar; URI URL URN 关系

    定义 URI:统一资源标识符(Uniform Resource Indentifier)用来标识服务器上的资源. URL:统一资源定位符(Uniform Resouce Locator)是资源标识符最 ...

  6. 转发一个javascript的编码规范

    google出品:http://chajn.org/jsguide/javascriptguide.html

  7. C&plus;&plus;编程练习&lpar;3&rpar;----&OpenCurlyDoubleQuote;实现简单的栈的顺序存储结构&OpenCurlyDoubleQuote;

    栈(stack)是限定仅在表尾进行插入和删除操作的线性表. 允许插入和删除的一端称为栈顶(top),另一端称为栈底(bottom). 栈又称为后进先出(Last In First Out)的线性表,简 ...

  8. 使用Runnable接口创建线程

    实现Runnable接口的类必须使用Thread类的实例才能创建线程.通过Runnable接口创建线程分为两步: 1.将实现Runnable接口的类实例化. 2.建立一个Thread对象,并将第一步实 ...

  9. Fiddler Web Debugger的截断功能(图文详解)

    不多说,直接上干货! Fiddler的重头好戏是截断数据包,首先需要设置截取数据包的类型,依次打开菜单“Rules->automatic breakpoints”,可以选择“before req ...

  10. Netty源码分析第8章&lpar;高性能工具类FastThreadLocal和Recycler&rpar;----&gt&semi;第4节&colon; recycler中获取对象

    Netty源码分析第八章: 高性能工具类FastThreadLocal和Recycler 第四节: recycler中获取对象 这一小节剖析如何从对象回收站中获取对象: 我们回顾上一小节demo的ma ...