无样式，比较丑

<!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. lua 根据函数名字符串来执行函数

    function myfunction(msg) print("this is msg fun " .. msg); end local fun =_G["myfunct ...

  2. 搭建Vue.js环境，建立一个简单的Vue项目

    基于vue-cli快速构建 Vue是近年来比较火的一个前端框架,所以搭建Vue.js环境,要装webpack,vue-cli,Vue 安装webpack命令如下 $ cnpm install webp ...

  3. debug的一点总结

    程序员常常需要和bug打交道,一般来说调试bug的时间要多于编写程序的时间. bug可以简单的分为两大类: 语法上的bug 逻辑上的bug 语法上的bug就是指编译器能够识别的,例如常见的缺少分号和括 ...

  4. Windows Server 2008 R2 WSUS服务器的详细配置和部署

    WSUS客户端配置 我们要让客户端计算机能够通过WSUS服务器下载更新程序,而这个设置在域环境和单台PC是的方法不同,这里介绍一下本地计算机如何进行设置. 1.开始--运行--输入gpedit.msc ...

  5. iOS开发-- 设置UIButton的文字显示位置、字体的大小、字体的颜色

    btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @"search" forState: UIControlS ...

  6. iOS开发--tarBarItem右上方显示badgeValue

    直接设置tabBarItem.badgeValue没有效果,找原因半天发现ViewController被NavigationViewController包着 需这样设置才行: self.navigat ...

  7. unity2017.4.0f1使用AS3.0的AndroidSDK遇到的问题

    原因: Unity 在编译时会调用 Android SDK tools 中的 android 命令,而在新版本的 Android SDK tools 中,android这个命令已经废弃了,导致 Uni ...

  8. N76E003之ISP

    Flash存储器支持硬件编程和应用编程(IAP).如果产品在研发阶段或产品需要更新软固件时,硬件编程就显得不太方便,采用在系统编程(ISP)方式,可使这一过程变得方便.执行ISP不需要将控制器从系统板 ...

  9. 《转载》为什么我要在2018年学习Python？

    本文转载自36kr 从网页编程到时髦的人工智能,机器学习,这个享有"瑞士军刀(万能工具)"盛誉的Python语言, 你学会了吗? 编者注: 根据维基百科的解释,"Pyth ...

  10. RewriteCond和13个mod_rewrite应用举例Apache伪静态

    1．给子域名加www标记 RewriteCond %{HTTP_HOST} ^([a-z.]+)?example\.com$ [NC] RewriteCond %{HTTP_HOST} !^www\. ...