js——全选框 checkbox
一直会碰见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的更多相关文章
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- [原创]纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- Js动态添加复选框Checkbox
Js动态添加复选框Checkbox的实例方法!!! 首先,使用JS动态产生Checkbox可以采用如下类似的语句: var checkBox=document.createElement(" ...
- 2017 年 9 月 27 日 js(1.两个select 内容互换 2.单选按钮 同意可点击下一步 3. 全选框)
1.两个select 内容互换 <!DOCTYPE html><html> <head> <meta charset="UTF- ...
- js 全选选框与取消全选代码
设置一个全选选框和四个子选框,要实现点击全选后四个子选框选中,取消全选后四个子选框也取消.全选后点击某个子选框,全选也能取消.当四个子选框都选中时,全选框也被选择. 实现代码: <script& ...
- JS全选功能代码优化
原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...
- vue实现全选框效果
vue实现全选框效果 一.总结 一句话总结: 全选的checkbox点击的时候判断这个checkbox的状态,如果没选中,说明下一个操作是选中所有 下面的每个checkbox判断一下是否所有的chec ...
- 复选框(checkbox)、单选框(radiobox)的使用
复选框(checkbox).单选框(radiobox)的使用 复选框: HTML: // 复选框 <input type="checkbox" name="chec ...
随机推荐
- 图--DFS求连通块
The GeoSurvComp geologic survey company is responsible for detecting u ...
- 【T-SQL系列】临时表、表变量
临时表临时表与永久表相似,只是它的创建是在Tempdb中,它只有在一个数据库连接结束后或者由SQL命令DROP掉,才会消失,否则就会一直存在.临时表在创建的时候都会产生SQL Server的系统日志, ...
- openstack 网卡
桥接基本原理: 物理网卡eth0 br0(桥) tap0,tap1(tap是给vm使用的接口)
- poj1673EXOCENTER OF A TRIANGLE
链接 据说这题是垂心..数学太弱没有看出来,写了分朴实无华的代码.. 旋转三边得到图中的外顶点,然后连接三角形顶点求交点,交上WA..觉得没什么错误就去看了下discuss,发现都在说精度问题,果断开 ...
- Android notifications通知栏的使用
app发送通知消息到通知栏中的关键代码和点击事件: package com.example.notifications; import android.os.Bundle; import androi ...
- Ruby方法
Ruby 方法 Ruby 方法与其他编程语言中的函数类似.Ruby 方法用于捆绑一个或多个重复的语句到一个单元中. 方法名应以小写字母开头.如果您以大写字母作为方法名的开头,Ruby 可能会把它当作常 ...
- DHCP 工作原理
DHCP 详解 DHCP 工作原理 一.什么是DHCP? DHCP,动态主机配置协议,前身是BOOTP协议,是一个局域网的网络协议,使用UDP协议工作,常用的2个端口:67(DHCP server), ...
- 详细地jsoncpp编译方法 和 vs2010中导入第三方库的方法
详细地jsoncpp编译方法 和 vs2010中导入第三方库的方法 一 编译链接 1 在相应官网下载jsoncpp 2 解压得到jsoncpp-src-0.5.0文件 3 打开jsoncpp-src- ...
- PHP 用文件流方式展示图片
public function index(){ $img = 'http://img.pf.loc/static/images/2016/05/24/21d98edf98bd6c30afe1c838 ...
- Java中的Double类型计算
一.问题的提出: 如果我们编译运行下面这个程序会看到什么?public class Test{ public static void main(String args[]){ Sy ...