实现效果:

html代码:

 <body>

 <input type="checkbox" id="checkAll"/>全选<br>
<hr>
<input type="checkbox" name="color"/>红色<br>
<input type="checkbox" name="color"/>黄色<br>
<input type="checkbox" name="color"/>蓝色<br> </body>

JS代码:

 <script>
window.onload=function()
{
document.getElementById("checkAll").onclick = checkall;
}
function checkall()
{
var dom = document.getElementById("checkAll");
var doms = document.getElementsByName("color");
for(var i = 0;i<doms.length;i++)
{
doms.item(i).checked = dom.checked;
}
}
</script>

使用JavaScript实现复选框全选与取消的功能的更多相关文章

  1. JavaScript小例子:复选框全选

    JavaScript小例子:复选框全选 这只是一个小例子,很简单,但是这个功能还是很常用的: 实现后效果如图: JavaScript代码: <script type="text/jav ...

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

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

  3. 复选框全选、全不选和反选的效果实现VIEW:1592

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  4. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  5. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  6. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  7. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  8. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  9. jQuery中的几个案例:隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  10. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

随机推荐

  1. ubuntu16 修改apache端口号

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Hannotate SC" } span.s1 { } (1)apach ...

  2. 利用SSH传输文件

    在linux下一般用scp这个命令来通过ssh传输文件. 1.从服务器上下载文件scp username@servername:/path/filename /var/www/local_dir(本地 ...

  3. raw转qcow2

    raw转qcow2命令 : qemu-img convert -f raw test.img -O qcow2 test.img.qcow2 转晚之后,还需要virsh edit test,修改里面的 ...

  4. 基于Red5的视频直播平台

    搭建环境:Win2008 server + jdk1.8+red5-server-1.0.6 下载地址:https://github.com/Red5 修改启动配置文件(修改为jdk路径): 安装模版 ...

  5. javascript实现简单的轮播图片

    方法一: <script> var curIndex=0;//时间间隔(单位毫秒),每秒钟显示一张,数组共有5张图片放在Photos文件夹下. var timeInterval=1000; ...

  6. Ant 常用语法及选项

    project 项目定义,一个ant文件就是一个 project,定义了项目名称,起始位置以及默认执行的 target. <project name="Easily" bas ...

  7. 基础算法之快速排序Quick Sort

    原理 快速排序(Quicksort)是对冒泡排序的一种改进. 从数列中挑出一个元素,称为"基准"(pivot); 排序数列,所有元素比基准值小的摆放在基准前面,所有元素比基准值大的 ...

  8. C # 数据绑定(1)——将DataTabel的data添加ListView

    文/嶽永鹏 目标界面: 功能:通过响应UI Textbox 的值向ListView 绑定新添加的纪录. UI XAML 代码 <Grid Margin="5"> < ...

  9. android 使用httpclient访问网络

    在主活动类中,调用一个线程访问网络(android4.0以上耗时的操作不能放在主线程中):       //声明两个Button对象,与一个TextView对象private TextView mTe ...

  10. Linux系统的初化始配置(包括配置网络,修改主机名,关闭firewalld与selinux的生效)

    一.配置网络环境 1.运行 cmd 查看本机的ip地址,然后记录下来. 2.网络和共享中心--本地连接属性如下: 手工配置到本地连接上面 IP:172.16.191.215,DNS:101.7.8.9 ...