javascript实现全选,全不选,反选
利用input的checked属性来实现:checked值为true,表示被选择,否则反之。
效果:
js代码:
<script>
var butt1 = document.getElementById("butt1");
var butt2 = document.getElementById("butt2");
var butt3 = document.getElementById("butt3");
var pInput = document.getElementById("pInput");
var opInput = pInput.getElementsByTagName("input");
butt1.onclick = function(){
for(var i = 0;i<opInput.length;i++){
opInput[i].checked = true;
}
}
butt2.onclick = function(){
for(var i = 0;i< opInput.length;i++){
opInput[i].checked = false;
}
}
butt3.onclick = function(){
for(var i = 0;i< opInput.length;i++){
if(opInput[i].checked == false){
opInput[i].checked = true;
}
else{
opInput[i].checked = false;
}
}
}
</script>
1.通过var butt1 = document.getElementById("butt1")来获取对应的id元素。
2.butt1.onclick = function(){ }添加点击事件
3.通过对应元素的.getElementsByTagName(" ")获取该元素下的所有子元素,即数组。(不要忘记那个s)
凡是通过.getElementsByTagName(" ")来获取标签元素的,最后都为数组,可以用索引[i]获取。
4.尽量不使用document.getElementByClassName来获取class元素,我从网上看似乎是说兼容性不太好,有时候浏览器识别不出来。
5.input是checkbox类型时才可进行多选,即全选。radio类型时只能是单选。
完整代码:
<html>
<head>
<meta charset="utf-8" />
<title>1</title> </head> <body>
<div class="Form">
<form>
<input type="button" value="全选" id="butt1"></input>
<input type="button" value="全不选" id="butt2"></input>
<input type="button" value="反选" id="butt3"></input><br/> <p id="pInput">
<input type="checkbox" value="苹果">苹果</input><br/>
<input type="checkbox" value="香蕉">香蕉</input><br/>
<input type="checkbox" value="橘子">橘子</input>
</p> </form>
</div>
</body> <script> var butt1 = document.getElementById("butt1");
var butt2 = document.getElementById("butt2");
var butt3 = document.getElementById("butt3");
var pInput = document.getElementById("pInput");
var opInput = pInput.getElementsByTagName("input"); butt1.onclick = function(){
for(var i = 0;i<opInput.length;i++){
opInput[i].checked = true;
}
} butt2.onclick = function(){
for(var i = 0;i< opInput.length;i++){
opInput[i].checked = false;
}
} butt3.onclick = function(){
for(var i = 0;i< opInput.length;i++){
if(opInput[i].checked == false){
opInput[i].checked = true;
}
else{
opInput[i].checked = false;
}
}
} </script> </html>
参考博客:https://www.cnblogs.com/tynam/p/9833759.html
javascript实现全选,全不选,反选的更多相关文章
- jquery 全选 全不选 反选
1.概述 在项目中经常遇到列表中对复选框进行勾选操作,全选...反选.. 2. example <html> <body> <form id="test-for ...
- JavaScript案例四:全选练习
JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...
- 利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
- jquery的全选/全不选/反选以及attr添加checked属性失败的解决办法
如下图: <head> <title></title> <style type="text/css"> div { border: ...
- 【七】jquery之属性attr、 removeAttr、prop[全选全不选及反选]
全选全不选 界面: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- js实现全选/全不选、反选
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery实现全选、不选和反选功能
jQuery结合Font Awesome字体图标实现全选.不选和反选功能 Font Awesome字体图标链接地址:http://www.fontawesome.com.cn/faicons/ 效果: ...
- JavaScript自动计算价格和全选
JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- Java 多选框的全选、多选、反选(JQuery 实现)
jQuery 实现全选.多选.反选 学习内容: 需求 总结: 学习内容: 需求 jQuery 实现全选.多选.反选 实现代码 <!DOCTYPE html> <html lang=& ...
随机推荐
- aop通配符语法
*.表示通配包名 *. == com. com.rl.ecps.service == *.*.*.*. ..表示 通配任何包及其子包 例如 com.. ==com. *.*.*. com.rl. ...
- hibernate多对多映射文件的配置
user.hbm.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate ...
- codeforces589I
Lottery CodeForces - 589I Today Berland holds a lottery with a prize — a huge sum of money! There ar ...
- HTML5-Video视频-基础篇
展示视频 视频 <video width=" controls="controls"> <source src="movie.mp4" ...
- John the Ripper-弱口令检测
简介 John the Ripper免费的开源软件,是一个快速的密码破解工具,用于在已知密文的情况下尝试破解出明文的破解密码软件,支持目前大多数的加密算法,如DES.MD4.MD5等.它支持多种不同类 ...
- idea maven +spring mvc
1.步骤一 2.目录结构 3.maven <!--测试--> <dependency> <groupId>junit</groupId> <art ...
- php 排序数组array_multisort
$arr[] = array('name'=>'a','flag'=>1); $arr[] = array('name'=>'b','flag'=>2); $arr[] = a ...
- sshfs && tailon
sshfs 安装yum install glib2-devel fuse-sshfs官方版本地址https://github.com/libfuse/sshfs/releases目前最新版本:wget ...
- Android GPS定位测试(附效果图)
今天因为工作需要,把以前编写的一个GPS测试程序拿出来重新修改了一下.这个程序说起来有些历史了,是我11年编写的,那时候学了Android开发没多久,算是一个实验性的作品.现在工作需要,重新拿出来修整 ...
- Android 播放Gif 动画
在Android 中是不支持直接使用Gif 图片关联播放帧动画,如下动画在Android 中是无法播放的: Android 提供了另外一种解决的办法,就是使用AnimationDrawable 这一函 ...