关于如何用js完成全选反选框等内容
在学习js过程中按照视频写了这个页面
可以在点上面全选/全不选时全部选中或者取消
在单击下面的单选框时上面的全选会根据下面的单选框进行相应的调整
功能比较完善
以下是代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选练习</title>
<script>
window.onload = function () {
var items = document.getElementsByName( "items");
var checkedALLBtn = document.getElementById("checkedAllBtn")
checkedALLBtn.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=true;
}
checkedAllBox.checked=true;
}
var checkedNoBtn = document.getElementById("checkedNoBtn")
checkedNoBtn.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=false;
}
checkedAllBox.checked=false; }
var checkedRevBtn = document.getElementById("checkedRevBtn")
checkedRevBtn.onclick = function () {
checkedAllBox.checked=true;
for (var i=0;i<items.length;i++){
items[i].checked=!items[i].checked;
if(!items[i].checked){
checkedAllBox.checked=false;
}
} }
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
for (var i=0;i<items.length;i++){
items[i].checked=checkedAllBox.checked;
}
}
for (var i=0;i<items.length;i++){
items[i].onclick = function () {
checkedAllBox.checked=true;
for (var j=0;j<items.length;j++){
if(!items[j].checked){
checkedAllBox.checked=false;
break;
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是 <input type="checkbox" id="checkedAllBox">全选/全不选
<br>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="蓝球">蓝球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkedAllBtn" value="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>
关于如何用js完成全选反选框等内容的更多相关文章
- js实现全选,反选,全不选
思路:1.获取元素.2.用for循环历遍数组,把checkbox的checked设置为true即实现全选,把checkbox的checked设置为false即实现不选.3.通过if判断,如果check ...
- 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=& ...
- JS实现简单的多选选项的全选反选按钮
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <!-- 5 需求: 6 1.写三个按钮: ...
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
随机推荐
- 服务器上如何再另外添加一个E盘
我的电脑按右键,选择管理..然后在左边选择磁盘管理,然后对着C盘或者D盘按右键,选择压缩卷,等一下下,就会出现个框框让你选择压缩多少,然后多了一个可用空间,再把它分成一个分区就OK拉 步骤:对可用空间 ...
- UVa 11136 Hoax or what （STL）
题意:有 n 天,每天有m个数,开始的前一天没有数据,然后每天从这个里面拿出一个最大的和最小的,求 n 天的最大的和最小的差值相加. 析:一看就知道用set啊,多简单的STL,不过要注意,开long ...
- 检测Linux系统是否支持某系统调用
随内核版本的变化,会增加一些新的系统调用,但如果glibc没有跟上,则不能直接调用,这个时候可以自己包装一下.如果想知道内核是否支持某系统调用,先得知道它的系统调用ID号,下面代码即是用来检查是否支持 ...
- Head First iOS Programming
内部分享: Head First iOS Programming http://www.slideshare.net/tedzhaoxa/head-first-ios-programming-4606 ...
- Linux Socket - 基本socket链接
0x0000 Linux Socket 函数 bind listen connect accept send recv read write 0x0001 Server绑不上ip 报错位置在bind函 ...
- Hadoop map任务数量的计算
Hadoop中决定map个数的的因素有几个,由于版本的不同,决定因素也不一样,掌握这些因素对了解hadoop分片的划分有很大帮助, 并且对优化hadoop性能也很有大的益处. 旧API中getSpli ...
- oracle 11gr2 2.04 em 更改 hostname 后无需重建资料库的方法
1) 备份删除$ORACKE_HOME/ xxxx-sid 的EM目录:复制要创建的xxx-sid EM 名称目录: 备份删除$ORACKE_HOME/oc4j/j2ee/ xxxx-sid 的EM目 ...
- 学习css（一）
font:12px/22px "\5B8B\4F53",Arial, Helvetica, sans-serif font:12px/22px 指 字体大小/字体行高 " ...
- .net程序员书单
C# 基础 <CLR via C#> <c# 高级编程> 框架学习 <WPF编程宝典 > (英文名:<Pro WPF 4.5 in C#. Windows P ...
- c# 后台GET、POST、PUT、DELETE传输发送json数据
一.Get 方式传输 //url为请求的网址,param参数为需要查询的条件(服务端接收的参数,没有则为null) //返回该次请求的响应 public string HttpGet(string u ...