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 ...
随机推荐
- LSTM入门学习——结合《LSTM模型》文章看
摘自:https://zybuluo.com/hanbingtao/note/581764 写得非常好 见原文 长短时记忆网络的思路比较简单.原始RNN的隐藏层只有一个状态,即h,它对于短期的输入非常 ...
- 轻量级记事本工具：CintaNotes
本片文章介绍CintaNotes小工具 功能介绍: 方便.快捷的记录笔记: 快捷地从任何地方等截取内容生成笔记: 高效的记事本内容查询: 轻松的标签管理 支持移动设备和电脑同步(估计要收费) 官网下载 ...
- 父子间通信四 ($dispatch 和 $broadcast用法)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- linux 10201 ocfs RAC 安装+升级到10205
准备环境的时 ,要4个对外IP,2个对内IP 不超过2T,,一般都用OCFS 高端存储适合用ASM linux10G安装的时候,安装的机器时间要小于等于(如果是等于要严格等于)第二个机器的时间(只有l ...
- try{futureGirl}catch(Exception){"Kill All Trouble"}——echarts样式
首先先给未来女,解释一下题目吧.这是段代码,我再try{}括号里写了你,意思我会保护你.后面的catch(Exception)是捕捉你的所有麻烦,交给我解决. 今天收工较早,拖着疲惫是身躯回到宿舍,简 ...
- weex入门（一）
emmmm其实没有接触过weex ,了解一番发现有很多坑,有很多基于weex改良后的框架,比如weexplus等等,基本不用踩多少坑.经过几天的深思熟虑我觉得还是去踩坑,毕竟踩完坑才能真正的了解嘛 w ...
- 今日SGU 5.14
//SGU 131 还没完全想清楚 留坑 SGU 259 题意:一个机器处理n个任务,每个任务有时间t和传送时间l 收获:贪心 #include<bits/stdc++.h> #defin ...
- 洛谷—— P2580 于是他错误的点名开始了
https://www.luogu.org/problem/show?pid=2580 题目背景 XS中学化学竞赛组教练是一个酷爱炉石的人. 他会一边搓炉石一边点名以至于有一天他连续点到了某个同学两次 ...
- win系统下的eclipse连接和使用linux上的hadoop集群
准备工作 先在win系统的hosts文件中加入下面内容 10.61.6.164master //hadoop集群的master节点 一.首先在eclipse上安装hadoop插件 下载hado ...
- C++ Primer高速入门之六：数组和指针
更新:勘误,delete [] 猪 我们知道,C语言以及早期的面向结构的语言差点儿都支持数组定义.比方整形数组int 女神[2].表示有俩数: 女神[0], 女神[1].她们都是整数. C++ 语言为 ...