无样式，比较丑

<!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. phpcms 字符截取str_cut的使用

    PHPCMS中截取字符串用的是 str_cut 系统函数,通常在输出标题或者是内容摘要的时候使用来限制字符串的字符,这样就可以防止因字符串而变成的页面变形等问题. 我们来看一下这个函数,在PHPCMS ...

  2. [原] unity3d调用android版 人人sdk

    开发过程 遇到天坑:纯android工程没问题,集成到unity3d中 就老提示 没登陆 .最后跟到底 发现是Util.java 中 openUrl 函数出的bug.unity3d 中调android ...

  3. GDAL------加载Shapefile文件

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  4. PHP计算两个绝对路径的相对路径

    用PHP计算两个绝对路径的相对路径,该如何求呢? 先根据分隔符切割,然后查找相同 异同点,然后开始有相同点,从相同点结束为止开始拼接剩余部分,没有的话,到达根路径拼接整体. 截图如下: 代码如下: & ...

  5. 【Android】录音-amr音频录制

    http://www.cnblogs.com/fengzhblog/archive/2013/08/01/3231500.html http://blog.csdn.net/fan7983377/ar ...

  6. Django 添加应用

    一个项目可以添加多个应用,可以使用以下两种方法来添加应用: [root@localhost web]$ python manage.py startapp blog [root@localhost w ...

  7. STL——关联式容器

    一.关联式容器 标准的STL关联式容器分为set(集合)/map(映射表)两大类,以及这两大类的衍生体multiset(多键集合)和 multimap(多键映射表).这些容器的底层机制均以RB-tre ...

  8. Win8应用开发 入门篇（三） UX交互导航模式

    导航模式(Windows 应用商店应用)   在本文中 分层模式 画布上导航 顶部应用栏 语义式缩放 相关主题 组织 Windows 应用商店应用中的内容,以便用户可以轻松而直观地进行导航.使用正确的 ...

  9. 【云迁移论文笔记】A Comparison of On-premise to Cloud Migration Approaches

    A Comparison of On-premise to Cloud Migration Approaches Author Info: Claus Pahl senior lecturer at ...

  10. 关于SQL优化（转载，格式有调整）

    一.问题的提出 在应用系统开发初期,由于开发数据库数据比较少,对于查询SQL语句,复杂视图的的编写等体会不出SQL语句各种写法的性能优劣,但是如果将应用 系统提交实际应用后,随着数据库中数据的增加,系 ...