无样式，比较丑

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var arr=document.getElementsByName("a");
//全选
var btn=document.getElementsByName("b")[0];
btn.onclick=function(){
for(var i=0; i<arr.length; i++){
arr[i].checked=this.checked;
}
}
//反选
var btn2=document.getElementsByName("c")[0];
btn2.onclick=function(){
for(var i=0; i<arr.length; i++){
arr[i].checked = !arr[i].checked;
}
}
//取出所选值
var btn3=document.getElementsByName("d")[0];
btn3.onclick=function(){
var str="";
for(var i=0; i<arr.length; i++){
if( arr[i].checked ){
str+=arr[i].value+"; "
}
}
alert(str);
}
/*
!指取反，返回布尔类型
*/
}
</script>
</head>
<body>

<input type="checkbox" name="a" value="1" />1
<input type="checkbox" name="a" value="2" />2
<input type="checkbox" name="a" value="3" />3
<input type="checkbox" name="a" value="4" />4

<br>
<input type="checkbox" name="b" />全选
<br>
<input type="button" name="c" value="反选" />
<br>
<input type="button" name="d" value="取出所选值" />

</body>
</html>

原生JS实现全选，反选的更多相关文章

  1. 关于如何用js完成全选反选框等内容

    在学习js过程中按照视频写了这个页面 可以在点上面全选/全不选时全部选中或者取消 在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整 功能比较完善 以下是代码 <!DOCTYPE h ...

  2. js实现全选,反选,全不选

    思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...

  3. 原生JS实现全选和不全选

    案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...

  4. js实现全选反选功能

    开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); f ...

  5. js实现全选反选（开关门）

    话不多说直接看图吧

  6. JavaScript Web API 全选反选案例

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

  7. JS实现全选、反选、不选

    JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  8. js和jq实现全选反选

    在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...

  9. elementUI+JS实现全选与反选

    在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...

随机推荐

  1. 源码分析一(Iterator、Collection以及List接口)

    1:Iterable接口,实现这个接口的类对象可以进行迭代 package java.lang; import java.util.Iterator; /** * 实现这个接口的类所创建的对象可以进行 ...

  2. LINE 不被封锁的技巧

    什么是封锁? 谈LINE 被封锁之前,我们先来了解一下什么是封锁.LINE 的封锁分为「好友封锁你」与「官方封锁你」二种,有些人将官方封锁讲成「停权」,其实LINE 的停权并不是你的帐号全被封锁,被封 ...

  3. 关于测试中哪些信息需要放到jira上面

    1.每个新需求的功能点,全部在jira上一一呈现 2.每个bug也一样在jira上一一呈现 3.任务一个需要优化改进的点也一一在jira上呈现 然后程序员一直开发新功能和修改新bug,测试人员负责bu ...

  4. node.js--Less

    摘要: 现在已经有许多站点使用Node.js,所以在Node.js上配置Less环境也是很重要的,下面分享下如何在Node上使用Less开发,前提是你电脑上已经安装node. 安装: 只需要执行下面一 ...

  5. php单元测试断言方法

    1.assertArrayHasKey() 用法:$this->assertArrayHasKey('foo', ['bar' => 'baz']); 等同于array_key_exist ...

  6. Python基础教程学习笔记：第一章 基础知识

    Python基础教程 第二版 学习笔记 1.python的每一个语句的后面可以添加分号也可以不添加分号:在一行有多条语句的时候,必须使用分号加以区分 2.查看Python版本号,在Dos窗口中输入“p ...

  7. Ubuntu 16.04服务器 软件的安装及配置

    SSH的安装及配置 SSH分客户端openssh-client和openssh-server 如果你只是想登陆别的机器的SSH只需要安装openssh-client(ubuntu有默认安装,如果没有则 ...

  8. 7 -- Spring的基本用法 -- 8... 抽象Bean与子Bean；Bean继承与Java继承的区别；容器中的工厂Bean；获得Bean本身的id；强制初始化Bean

    7.8 深入理解容器中的Bean 7.8.1 抽象Bean与子Bean 把多个<bean.../>配置中相同的信息提取出来,集中成配置模版------这个配置模版并不是真正的Bean,因此 ...

  9. 【RF库Collections测试】Set List Value

    Name:Set List ValueSource:Collections <test library>Arguments:[ list_ | index | value ]Sets th ...

  10. android基础---->IntentService的使用

    这一篇博客,我们开始前台服务与IntentServie源码分析的学习,关于service的生命周期及其简单使用,请参见我的博客:(android基础---->service的生命周期) 目录导航 ...