原生JS实现全选，反选
无样式，比较丑
<!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实现全选，反选的更多相关文章
- 关于如何用js完成全选反选框等内容
在学习js过程中按照视频写了这个页面 可以在点上面全选/全不选时全部选中或者取消 在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整 功能比较完善 以下是代码 <!DOCTYPE h ...
- js实现全选,反选,全不选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- 原生JS实现全选和不全选
案例演示 源代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset=" ...
- js实现全选反选功能
开始慢慢地学习js&jQuery. function clicked(){ var arr=document.getElementsByName("product"); f ...
- js实现全选反选（开关门）
话不多说直接看图吧
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- js和jq实现全选反选
在前端中用到全选反选的案例并不少,在这里呢我就实现这个功能给大家参考参考. 这里呢就先贴上我的html和css代码 <div class="wrap"> <tab ...
- elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
随机推荐
- 用python将MSCOCO和Caltech行人检测数据集转化成VOC格式
代码:转换用的代码放在这里 之前用Tensorflow提供的object detection API可以很方便的进行fine-tuning实现所需的特定物体检测模型(看这里).那么现在的主要问题就是数 ...
- Python下字符画（ascii art）生成
之前在b站上看到有人用C写了个脚本把妹抖龙op转换成字符画的形式输出了,感觉比较好玩在下就用python也写了一遍(主要是因为python比较简单好用).这里就这里就不介绍字符画了,因为能搜到这个的肯 ...
- vs2012更改默认开发环境
1.在菜单栏里找到“Tools”(工具),选择下面的“Import and Export Settings”(导入和导出设置),如图1所示: 图1 2.弹出如下界面,按提示选择你需要 ...
- Eclipse cdt解决github导入的项目无法打开声明的bug (cannot open declaration)
概述: 我利用eclipse 的git插件clone github上的远程项目(C++)到本地时遇到一个问题:clone下来的项目没有C++特性,无法使用open declaration等操作,下面是 ...
- 联想一体机u盘启动设置
开机启动按f12键,进入后,到最后一项exit把OS Optimized Defaults(操作系统优化的缺省值)改成Disabled(关闭). 再进入到Startup这一项,选择UEFI/Legac ...
- Redis 操作集合数据
Redis 操作集合数据: > sadd set1 Tom // sadd 用于往集合中添加元素 (integer) > sadd set1 John (integer) > sad ...
- CMD打开模拟器
CMD-> CD d:\android\android-sdk-151\tools-> (这里的路径是你emulator.exe所在的路径) emulator -avd avdname-& ...
- MQTT-C-PUB
/* ============================================================================ Name : mqtest ...
- iOS - 栈顶VC控制器的获取
iOS 获取当前顶层的ViewController #pragma mark - topVC - (UIViewController *)theTopviewControler { UIViewCon ...
- 使用C#把发表的时间改为几个月,几天前,几小时前,几分钟前,或几秒前
//使用C#把发表的时间改为几个月,几天前,几小时前,几分钟前,或几秒前 //2008年03月15日 星期六 02:35 public string DateStringFromNow(DateTim ...