无样式，比较丑

<!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. 让maven使用国内镜像和archetypeCatalog

    https://blog.csdn.net/zhang_red/article/details/54603530

  2. git同时提交到两个仓库

    有时候一个项目,希望既提交到oschina又提交到公司内网的gitlab,或者是github什么的. 使用git remote -v 查看当前git的远程仓库. 添加一个远程仓库 git remote ...

  3. c++Valgrind内存检测工具---19

    原创博文,转载请标明出处--周学伟  http://www.cnblogs.com/zxouxuewei/ 一.Valgrind 概述 Valgrind是一套Linux下,开放源代码(GPL V2)的 ...

  4. Android基础部分再学习---activity的状态保存

    主要是bundle   这个參数 參考地址:http://blog.csdn.net/lonelyroamer/article/details/18715975 学习Activity的生命周期,我们知 ...

  5. Dubbo -- 系统学习 笔记 -- 示例 -- 线程模型

    Dubbo -- 系统学习 笔记 -- 目录 示例 想完整的运行起来,请参见:快速启动,这里只列出各种场景的配置方式 线程模型 事件处理线程说明 如果事件处理的逻辑能迅速完成,并且不会发起新的IO请求 ...

  6. EhCache初体验

    一.简介 EhCache 是一个纯Java的进程内缓存框架,具有快速.精干等特点.Ehcache是一种广泛使用的开源Java分布式缓存.主要面向通用缓存,Java EE和轻量级容器.它具有内存和磁盘存 ...

  7. Nginx（五）-- 配置文件之Rewrite

    Rewrite支持URL重写 1.常用指令以及语法 1) if指令    if语法: if 空格 (condition) {}     条件:     1. “=” 来判断相等,用于字符的比较     ...

  8. proxy chains 试用

    我的机子是通过一台windows机器上的CCProxy代理上网.可是在设置了系统代理以后,发现在终端下若要进行ftp或者ssh等操作,并不能使用代理(但是wget是可以的). 期间试过一些方法,比如在 ...

  9. [XPath] XPath 与 lxml （四）XPath 运算符

    XPath 中支持的运算符 # | 或: 返回所有 price 和 title 节点集合 >>> root.xpath('//price|//title') [<Element ...

  10. Hadoop学习笔记（1）:WordCount程序的实现与总结

    开篇语: 这几天开始学习Hadoop,花费了整整一天终于把伪分布式给搭好了,激动之情无法言表······ 搭好环境之后,按着书本的代码,实现了这个被誉为Hadoop中的HelloWorld的程序--W ...