一直会碰见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. 图--DFS求连通块

                                  The GeoSurvComp geologic survey company is responsible for detecting u ...

  2. 【T-SQL系列】临时表、表变量

    临时表临时表与永久表相似,只是它的创建是在Tempdb中,它只有在一个数据库连接结束后或者由SQL命令DROP掉,才会消失,否则就会一直存在.临时表在创建的时候都会产生SQL Server的系统日志, ...

  3. openstack 网卡

    桥接基本原理: 物理网卡eth0 br0(桥) tap0,tap1(tap是给vm使用的接口)

  4. poj1673EXOCENTER OF A TRIANGLE

    链接 据说这题是垂心..数学太弱没有看出来,写了分朴实无华的代码.. 旋转三边得到图中的外顶点,然后连接三角形顶点求交点,交上WA..觉得没什么错误就去看了下discuss,发现都在说精度问题,果断开 ...

  5. Android notifications通知栏的使用

    app发送通知消息到通知栏中的关键代码和点击事件: package com.example.notifications; import android.os.Bundle; import androi ...

  6. Ruby方法

    Ruby 方法 Ruby 方法与其他编程语言中的函数类似.Ruby 方法用于捆绑一个或多个重复的语句到一个单元中. 方法名应以小写字母开头.如果您以大写字母作为方法名的开头,Ruby 可能会把它当作常 ...

  7. DHCP 工作原理

    DHCP 详解 DHCP 工作原理 一.什么是DHCP? DHCP,动态主机配置协议,前身是BOOTP协议,是一个局域网的网络协议,使用UDP协议工作,常用的2个端口:67(DHCP server), ...

  8. 详细地jsoncpp编译方法 和 vs2010中导入第三方库的方法

    详细地jsoncpp编译方法 和 vs2010中导入第三方库的方法 一 编译链接 1 在相应官网下载jsoncpp 2 解压得到jsoncpp-src-0.5.0文件 3 打开jsoncpp-src- ...

  9. PHP 用文件流方式展示图片

    public function index(){ $img = 'http://img.pf.loc/static/images/2016/05/24/21d98edf98bd6c30afe1c838 ...

  10. Java中的Double类型计算

    一.问题的提出: 如果我们编译运行下面这个程序会看到什么?public class Test{    public static void main(String args[]){        Sy ...