js全选反选按钮实现
<!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全选反选按钮实现的更多相关文章
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
- JS全选反选功能
总选框:<input type="checkbox" class="all" name="all"> 子选框: <inpu ...
- js全选 反选
// 全选 反选 allChoose: function (o) { var obj = $.extend(true, { id: "#id", name: "name& ...
- JS实现简单的多选选项的全选反选按钮
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!-- 5 需求: 6 1.写三个按钮: ...
- html js 全选 反选 全不选源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 全选 反选
1.全选 function selectAll(form){ for (var i = 0; i < form.elements.length; i++) { if (form.elements ...
- 关于js 全选 反选
prop 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法. attr 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法. $("#selectAll ...
- js全选反选
<style type="text/css"> table { width: 800px; text-align: left; border-collapse: col ...
- js 全选反选
<th><input type="checkbox" id="checkall" name="checkall" oncl ...
随机推荐
- 【HeadFirst设计模式——开篇】
近期在看HeadFirst,接下来的一段时间会陆续更新有关HeadFirst设计模式相关的文章.记得非常久之前在学习大话设计模式的时候,仅仅是走马观花的大致走过一遍.至于里面非常多东西都掌握的不是非常 ...
- P3507 [POI2010]GRA-The Minima Game
题目描述 Alice and Bob learned the minima game, which they like very much, recently. The rules of the ga ...
- Codeforces 701A. Cards(水)
A. Cards time limit per test 1 second memory limit per test 256 megabytes input standard input outpu ...
- vue+ webpack中的animate.css实现的执行多个连续的动画
1.安装 npm install animate.css 2.使用方法 入口文件App中进行引入 import animate from 'animate.css' 3.多个连续的动画 实现的效果:实 ...
- angular-cli6使用ng serve --o 控制台报错Invalid Host Header
angular-cli6使用ng serve --o 运行创建的项目,能正常访问,但是控制台一直在报错,点击报错能看到是因为webpack的webpack-dev-server里报的错, 看到网上介绍 ...
- 概率编程:《贝叶斯方法概率编程与贝叶斯推断》中文PDF+英文PDF+代码
贝叶斯推理的方法非常自然和极其强大.然而,大多数图书讨论贝叶斯推理,依赖于非常复杂的数学分析和人工的例子,使没有强大数学背景的人无法接触.<贝叶斯方法概率编程与贝叶斯推断>从编程.计算的角 ...
- final使用方法
final的作用随着所修饰的类型而不同 1.final修饰类中的属性或者变量 不管属性是基本类型还是引用类型.final所起的作用都是变量里面存放的"值"不能变. 这个值,对 ...
- 深入理解Android（1）——理解Android中的JNI（上）
我参加了CSDN博客之星评选,如果在过去的一段时间里阳光小强的博客对你有所帮助,在这里希望能投上您宝贵的一票,每天都可以投一次:http://vote.blog.csdn.net/blogstar20 ...
- Kinect 开发 —— 硬件设备解剖
Kinect for Xbox: 360 不支持“近景模式” 三只眼睛 —— 红外投影机,RGB摄像头,红外深度投影头 —— 色彩影像中的每个像素分别与深度影像中的一个像素对应 四只耳朵 —— L形 ...
- C/C++(指针数组)
指针数组 指针数组的本质是数组,数组指针的本质是指针 一个数组中的各个元素都是字符指针,即为字符指针数组,或者指针数组. int arr[] = {1,2,23,45,6};//整形数组 char c ...