<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
</head>
<body>
<form action="">
<p><input type="checkbox" >我是谁</p>
<p><input type="checkbox" >我在哪</p>
<p><input type="checkbox" >我在做什么呢</p>
<p><input type="checkbox" >你知道</p>
<p><input type="checkbox" >我不知道</p>
</form>
<p>
<button id="all">全选</button>
<button id="notall">全不选</button>
<button id="unall">反选</button>
</p>
<script>
var all =document.getElementById('all');
var notall=document.getElementById('notall');
var unall=document.getElementById('unall');
var inputs =document.getElementsByTagName('input');
all.onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked=true;
}
}
notall.onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked=false;
}
}
unall.onclick=function(){
for(var i=0;i<inputs.length;i++){
inputs[i].checked = !inputs[i].checked;
}
}
</script>

</body>
</html>

js全选反选按钮实现的更多相关文章

  1. jquery、js全选反选checkbox

    操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...

  2. JS全选反选功能

    总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...

  3. js全选 反选

    // 全选 反选 allChoose: function (o) { var obj = $.extend(true, { id: "#id", name: "name& ...

  4. JS实现简单的多选选项的全选反选按钮

    1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!-- 5 需求: 6 1.写三个按钮: ...

  5. html js 全选 反选 全不选源代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. js 全选 反选

    1.全选 function selectAll(form){ for (var i = 0; i < form.elements.length; i++) { if (form.elements ...

  7. 关于js 全选 反选

    prop 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. attr  对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. $("#selectAll ...

  8. js全选反选

    <style type="text/css"> table { width: 800px; text-align: left; border-collapse: col ...

  9. js 全选反选

    <th><input type="checkbox" id="checkall" name="checkall" oncl ...

随机推荐

  1. ubuntu下安装RemixOS双系统(Android x86)

    这篇文章主要讲在怎样在ubuntu下安装RemixOS pc版(Android x86版本号),下面两种做法的思路都适合安装不论什么版本号的Android x86版本号到ubuntu系统上,仅仅须要改 ...

  2. OpenCASCADE Incremental Mesh

    OpenCASCADE Incremental Mesh eryar@163.com Abstract. OpenCASCADE IncrementalMesh is used to build th ...

  3. js最近天数

    //七天查询 recent(6); //30天查询 recent(30); //最近天数 var recent=function(arg){ var myDate = new Date(); //获取 ...

  4. 插入css样式表的三种方法

    http://www.w3school.com.cn/css/css_howto.asp http://www.runoob.com/css/css-howto.html 当读到一个样式表时,浏览器会 ...

  5. Android Design Support Library（一）用TabLayout实现类似网易选项卡动态滑动效果

    这里我们用TabLayout来实现这一效果.TabLayout是Android Design Support Library库中的控件.Google在2015的IO大会上,给我们带来了更加详细的Mat ...

  6. 英语影视台词---二、Inception

    英语影视台词---二.Inception 一.总结 一句话总结:盗梦空间 1.You're waiting for a train..A train that will take you far aw ...

  7. Java：JDBC操作

    内容:供程序员调用的接口与类,集成在java.sql和javax.sql包中,如:DriverManager类Connection接口Statement接口ResultSet接口 1.Class.fo ...

  8. Linux 终端仿真程序Putty

    PuTTY是一个Telnet.SSH.rlogin.纯TCP以及串行接口连接软件.较早的版本仅支持Windows平台,现在的版本中开始支持各类Unix平台. 用linux作为桌面系统,身为工程师很多时 ...

  9. 实现人脸识别性别之路---matplotlib之注释

    一.准备数据 利用np.linspace()函数得到一定范围内的数据集 利用2*x+1的公式求出y 二.创建窗口 三.根据具有规律的数据画图 四.调整坐标轴 1.将原本的坐标轴的上轴和右轴去掉,使用基 ...

  10. Mysql学习总结（11）——MySql存储过程与函数

    摘要:存储过程和函数是在数据库中定义一些SQL语句的集合,然后直接调用这些存储过程和函数来执行已经定义好的SQL语句.存储过程和函数可以避免开发人员重复的编写相同的SQL语句.而且,存储过程和函数是在 ...