无样式，比较丑

<!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. swagger的说明、配置及使用

    一.What is swagger? 官方介绍:Swagger是一个规范且完整的框架,提供描述.生产.消费和可视化RESTful Web Service.专业角度:Swagger是由庞大工具集合支撑的 ...

  2. 第五种方式，python使用组合来添加类方法和属性（二），以selenium的webdriver为例

    组合优点多,但经常比继承需要额外的代码. 上一篇是 介绍装饰器.继承.元类.mixin,四种給类动态添加类属性和方法的四种方式. 此篇介绍直接把被组合的类的属性直接加入到类里面,前面的四个例子很简单, ...

  3. feed流拉取，读扩散，究竟是啥？

    from:https://mp.weixin.qq.com/s?__biz=MjM5ODYxMDA5OQ==&mid=2651961214&idx=1&sn=5e80ad6f2 ...

  4. eclipse 安装 ndk 组件

    新安装的eclipse没有ndk组件, 我使用的安装包是:android-ndk32-r10b-windows-x86_64.zip,打开preferences如下

  5. windows恶意软件删除工具(MRT.exe)检查计算机是否感染病毒使用图解

    Microsoft Windows恶意软件删除工具可以检查运行 Windows XP.Windows 2000 和 Windows Server 2003 的计算机是否受到特殊.流行的恶意软件(包括 ...

  6. Tomcat漏洞利用与安全加固实例分析

    Tomcat中间件经常遇到的漏洞: 1.Tomcat默认存在一个管理后台,默认的管理地址是http://IP或域名:端口号/manager/html 2.Axis2默认口令安全漏洞,默认的管理地址是h ...

  7. iOS开发-UIImageView响应点击事件

    UIImageView是不能够响应点击事件的,在开发过程中我们需要经常对头像等添加点击事件,上网搜索一番后发现有如下两个方法: 1.找到点击图片Event,添加事件处理函数 UIImageView.u ...

  8. [XPath] XPath 与 lxml （二）XPath 语法

    XPath 选取节点时使用的表达式是一种路径表达式.节点是通过路径(path)或者步(steps)来选取的. 本章使用以下 XML 文档作为示例. <?xml version="1.0 ...

  9. [转]redis的三种启动方式

    来源:https://www.cnblogs.com/pqchao/p/6549510.html redis的启动方式1.直接启动  进入redis根目录,执行命令:  #加上‘&’号使red ...

  10. C语言结构体和指针

    指针也可以指向一个结构体,定义的形式一般为: struct 结构体名 *变量名; 下面是一个定义结构体指针的实例: struct stu{ char *name; //姓名 int num; //学号 ...