一直会碰见input 全选框的问题,先整理一种情况:

1.

<input  id="selectAll" type="checkbox" />全选

2.

<input type='checkbox' id='id1' name='cb' value='1' />value1
<input type='checkbox' id='id2' name='cb' value='2' />value2
<input type='checkbox' id='id3' name='cb' value='3' />value3

3.

//全选框
jQuery(function () {
jQuery("#selectAll").click(function () { //全选
if (this.checked) {
jQuery("input[name='cb']").each(function () {
this.checked = true;
});
} else { //取消全选
jQuery("input[name='cb']").each(function () {
this.checked = false;
});
}
}
);
});

4.或者另外一种很简便的方法:

//全选框
jQuery(function () {
jQuery("#selectAll").click(function () { //全选
jQuery("input[name='cb']").attr("checked", true);
} else { //取消全选
jQuery("input[name='cb']").attr("checked", true);
}
}
);
});

同样,也是可以达到预期的效果。。。

js——全选框 checkbox的更多相关文章

  1. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  2. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  3. [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  4. Js动态添加复选框Checkbox

    Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...

  5. 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)

    1.两个select 内容互换 <!DOCTYPE html><html>    <head>        <meta charset="UTF- ...

  6. js 全选选框与取消全选代码

    设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...

  7. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  8. vue实现全选框效果

    vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...

  9. 复选框(checkbox)、单选框(radiobox)的使用

    复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...

随机推荐

  1. [SAP ABAP开发技术总结]文本文件、Excel文件上传下传

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. [Java解惑]应用

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  3. Python入门-行和缩进

    学习Python与其他语言最大的区别就是,Python的代码块不使用大括号({})来控制类,函数以及其他逻辑判断.python最具特色的就是用缩进来写模块. 缩进的空白数量是可变的,但是所有代码块语句 ...

  4. SQL——连接查询

    以mysql为例: 新建两张表table1和table2 CREATE TABLE `table1` ( `id` ) NOT NULL auto_increment, `name` ) defaul ...

  5. python_way ,day11 线程,怎么写一个多线程?,队列,生产者消费者模型,线程锁,缓存(memcache,redis)

    python11 1.多线程原理 2.怎么写一个多线程? 3.队列 4.生产者消费者模型 5.线程锁 6.缓存 memcache redis 多线程原理 def f1(arg) print(arg) ...

  6. kafka单节点部署无法访问问题解决

    场景:在笔记本安装了一台虚拟机, 在本地的虚拟机上部署了一个kafka服务: 写了一个测试程序,在笔记本上运行测试程序,访问虚拟机上的kafka,报如下异常: 2015-01-15 09:33:26 ...

  7. Android中四种OnClick事件的写法

    package com.example.dailphone; import android.support.v7.app.ActionBarActivity; import android.suppo ...

  8. linux使用脚本自动连接数据库

    脚本名: mtest1.sh #!/bin/bash # test connecting to the Mysql server MYSQL=`which mysql` $MYSQL test -u ...

  9. 在.bashrc文件中定义函数

    在命令行上直接定义shell函数的明显缺点是当退出shell时,函数就消失了,对于复杂的函数来说,这可能会是个问题. 一个简单的方法就是每次启动新shell的时候都会自动加载所需要的函数. 最好的办法 ...

  10. iOS开发之 Xcode 6 创建一个Empty Application

    参考链接http://jingyan.baidu.com/article/2a138328bd73f2074b134f6d.html Xcode 6 正式版如何创建一个Empty Applicatio ...