关于如何用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 ...
随机推荐
- docker 初始化执行.sh修改.properties文件
1.testmysql.properties rootuser=aarootpass=bb 2.用环境变量修改testmysql.properties里面的rootuser和rootpass的值的脚本 ...
- Dockerfile RUN, CMD & ENTRYPOINT
Dockerfile RUN, CMD & ENTRYPOINT 在使用Dockerfile创建image时, 有几条指令比较容易混淆, RUN, CMD, ENTRYPOINT. RUN是在 ...
- （转）【javascript基础】原型与原型链
原文地址:http://www.cnblogs.com/allenxing/p/3527654.html 前言 原型是什么 理解原型对象 原型对象 isPrototypeOf hasOwnProper ...
- handsontable-cell type
在单元格中呈现自定义的元素:不能使用html元素 var data = [ { title: "<a href='http://www.amazon.com/Professional- ...
- How do I determine if I'm being run under the debugger?
#include <assert.h>#include <stdbool.h>#include <sys/types.h>#include <unistd.h ...
- Cockroachdb 二、手动部署
二 集群手动部署 **需求** a 本地已安装CockroachDB b 可SSH访问每台机器,用于分发二进制文件和证书 c 端口 26257 用于集群内部通信及客户端访问连接HAProxy 8080 ...
- EAS.Net 在程序里配置组件
public class BeforStart { /// <summary> /// 程序配置初始化 /// </summary> public static void EA ...
- 查看JVM
通过jconsole.exe来查看,jconsole.exe所在目录为/%JAVA_HOME%/bin/jconsole.exe 需要配置: -Dcom.sun.management.jmxrem ...
- ADO.NET操作SQL Server：数据库操作类(未封装)
1.添加数据 /// <summary> /// 添加数据 /// </summary> /// <param name="newEntity"> ...
- 未能加载文件或程序集“ICSharpCode.SharpZipLib, Version=0.86.0.518, Culture=neutral, PublicKeyToken=1b03e6acf116
最近项目新增需求批量通过Excel导入数据,果断想到NPOI,结果导入的时候突然跳出 未能加载文件或程序集“ICSharpCode.SharpZipLib, Version=0.86.0.518, C ...