无样式，比较丑

<!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. python中，如何将两个变量值进行拼接

    说明: 字符串和字符串之间可以拼接,那么变量和变量之间如何进行拼接,在此记录下. 操作过程: 1.通过加号 + 操作符,将两个变量拼接在一起 >>> prefix = 'p' > ...

  2. linux环境中iostat命令的安装,解决-bash: iostat: command not found问题

    需求说明: 今天在测试环境的主机上,准备通过iostat来查看系统的io情况,发现没有该命令 [root@testvm Packages]# iostat -bash: iostat: command ...

  3. HTML5标签embed详解

    摘要: <embed> 标签是 HTML 5 中的新标签,用来定义嵌入的内容,比如插件.类似于HTML 4.01 中的object和applet标签.我们要在网页中正常显示flash内容, ...

  4. servlet3.0 新特性和springboot Listener和filter案例

    1.filter package com.newtouch.zxf.filter; import java.io.IOException; import javax.servlet.Filter; i ...

  5. 定时器Enable Disable控制

    问题:定时器如何控制它一会可用一会不可用,根据某个业务需求,比如:一个控制台程序扫描表中某个条件的数据,处理数据,控制台分布式部署,当主机宕机后,从机扫描定时器需要可用,当主机复活后,从机的扫描定时器 ...

  6. SQLServer------备份与还原

    转载: http://www.cnblogs.com/zgqys1980/archive/2012/07/04/2576382.html

  7. C 修改命令行文本颜色

    #include <Windows.h> #include <stdio.h> int main() { HANDLE h = GetStdHandle(STD_OUTPUT_ ...

  8. MySQL开发面试题

    ……继上一篇MySQL的开发总结之后,适当的练习还是很有必要的…… SQL语法多变,不敢保证唯一,也不敢保证全对,如果错误欢迎指出,即刻修改. 一.现有表结构如下图 TABLENAME:afinfo ...

  9. 【NLP】HanLP环境

    1.参考:https://github.com/hankcs/pyhanlp 2.问题: C:\Users\ADMINI~1\AppData\Local\Temp\pip-install-u617cf ...

  10. RAC的搭建（三）--Grid的安装

    1. 安装cvuqdisk.rpm补丁包 在两个Oracle RAC 所有节点上安装操作系统程序包cvuqdisk.如果没有cvuqdisk,集群验证实用程序就无法发现共享磁盘. 该包在p104045 ...