<!DOCTYPE html>
<html>
<head>
<title>checkboxs.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
    //select 不行

function selects(value) {
        //获取所有的 name=fav的<input type="checkbox" name="fav" value="打架1"/>对象的集合
        var favsDom = document.getElementsByName("fav");
        if (value == 0) {
            for (var i = 0; i < favsDom.length; i++) {
                var favDom = favsDom[i];//获取具体的对象
                if (favDom.checked) {
                    favDom.checked = false;
                }
            }
        } else if (value == 1) {
            for (var i = 0; i < favsDom.length; i++) {
                var favDom = favsDom[i];//获取具体的对象
                if (!favDom.checked) {
                    favDom.checked = true;
                }
            }
        } else if (value == -1) {
            for (var i = 0; i < favsDom.length; i++) {
                var favDom = favsDom[i];//获取具体的对象
                favDom.checked = !favDom.checked;
                
            }
        }

}
</script>
</head>

<body>
    <div>
        <input type="checkbox" name="fav" value="打架1" />打架1<br /> <input
            type="checkbox" name="fav" value="打架2" />打架2<br /> <input
            type="checkbox" name="fav" value="打架3" />打架3<br /> <input
            type="checkbox" name="fav" value="打架4" />打架4<br /> <input
            type="checkbox" name="fav" value="打架5" />打架5<br /> <input
            type="checkbox" name="fav" value="打架6" />打架6<br />
    </div>

<div>
        <input type="button" id="qx" value="全选" onclick="selects(1)" /> <input
            type="button" id="fx" value="反选" onclick="selects(-1)" /> <input
            type="button" id="qbx" value="全不选" onclick="selects(0)" />
    </div>

</body>
</html>

JavaScript学习记录总结（八）——全选、反选的更多相关文章

  1. JavaScript实现表单的全选,反选,获取值

    构思 通过for循环和for in循环来实现,界面效果如下 步骤 全选: 循环给所有的表单设置checked 反选: 循环内判断checked是否为true,如果为true则改为false否则改为tr ...

  2. JavaScript学习——使用JS完成全选和全不选操作

    1.我们希望在后台系统实现一个批量删除的操作(全选所有的复选框)和全不选,显示效果如下: 2.步骤分析: 第一步:确定事件(onclick)并为其绑定一个函数(事件绑定到编号前面的复选框里面) 第二步 ...

  3. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 用javascript实现全选/反选组件

    以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...

  5. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  7. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  8. 用JavaScript实现全选-反选

    实现全选-反选 在日常生活我们会遇到需要全选-反选的地方,其实用JavaScript也能实现. 样式如下所示: 样式代码如下所示: <!DOCTYPE html PUBLIC "-// ...

  9. javascript总结41:表格全选反选,经典案例详解

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  10. Dom操作--全选反选

    我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...

随机推荐

  1. 吴恩达《深度学习》第四门课（3）目标检测（Object detection）

    3.1目标定位 (1)案例1:在构建自动驾驶时,需要定位出照片中的行人.汽车.摩托车和背景,即四个类别.可以设置这样的输出,首先第一个元素pc=1表示有要定位的物体,那么用另外四个输出元素表示定位框的 ...

  2. WCF中的AddressHeader作用

    客户端发送请求给服务端,服务端根据请求消息把消息转发给对应的终结点.这里面有个消息筛选机制,如果请求消息中带有地址报头相关信息,则会用地址报头匹配当前的所有终结点.所以默认情况下客户端和服务端的地址报 ...

  3. A记录，CNAME，MX记录，TTL

    A记录 A记录是用来指定主机名(或域名)对应的IP地址记录.用户可以将该域名下的网站服务器指向到自己的web server上.同时也可以设置您域名的二级域名. MX记录 MX记录邮件路由记录,用户可以 ...

  4. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

  5. 程序员必备技能：代码审查 (Google牛人谈Code Review)

    在上一篇博客里我暗示自己将不在为Google工作. 我还没有决定好去哪儿-有几个非常不错的工作机会让我选择.鉴于这段时间内我不受雇于任何公司,我想我可以写点和专业相关的东西,这些东西很有趣,但是如果我 ...

  6. 转：zip 和 unzip 的参数说明

    收集的资料: 1. 我想把一个文件abc.txt和一个目录dir1压缩成为yasuo.zip: # zip -r yasuo.zip abc.txt dir1 2.我下载了一个yasuo.zip文件, ...

  7. fuzhou 1692 Key problem ***

    Problem 1692 Key problem Accept: 103    Submit: 553 Time Limit: 1000 mSec    Memory Limit : 32768 KB ...

  8. UOJ#347. 【WC2018】通道(边分治)

    传送门 就是求两个点 \(a,b\) 使得 \(dis_1(a,b)+dis_2(a,b)+dis_3(a,b)\) 最大 step1 对第一棵树边分治 那么变成 \(d_1(a)+d_1(b)+di ...

  9. JAVASE(说出ArrayList,LinkedList的储存性能和特性)

    说出ArrayList,和LinkedList的储存性能和特性? 答: ##  ArrayList采用的是数组形式来保存对象的,这种方式将对象放在连续的位置中,优点是索引读取快,从最后插入和删除元素速 ...

  10. App更新之dialog数字进度条

    App更新之dialog数字进度条 前言:现在一般的Android软件都是需要不断更新的,当你打开某个app的时候,如果有新的版本,它会提示你有新版本需要更新.当有更新时,会弹出一个提示框,点击下载, ...