关于如何用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 ...
随机推荐
- spark VS mapreduce
Apache Spark,一个内存数据处理的框架,现在是一个顶级Apache项目. 这是Spark迈向稳定的重要一步,因为它越来越多地在下一代大数据应用中取代MapReduce. MapReduce是 ...
- web应用安全权威指南(文摘)
第1章 什么是web应用的安全隐患 第3章 Web安全基础,HTTP,会话管理,同源策略 content_length 字节数 content_type mime类型 百分号编码 referer :请 ...
- sed修改json内容
1.config.json { "whiteHoleUrl": "http://172.16.80.90/whui/serviceManagement/regist/ne ...
- 看图说说Heap中对象的生存状态
- android虚拟机的垃圾收集
Dalvik :http://zh.wikipedia.org/wiki/Dalvik%E8%99%9A%E6%8B%9F%E6%9C%BA ART :http://source.android.co ...
- Webservice发布
此文甚好,转载自:http://blog.163.com/java_player@126/blog/static/127930738200981555021925/ 某些地方笔者已经加以改进. 使用工 ...
- Solr相似度算法三：DRFSimilarity框架介绍
地址:http://terrier.org/docs/v3.5/dfr_description.html The Divergence from Randomness (DFR) paradigm i ...
- asp:Repeater数据源为空时处理方式
当Repeater的数据源为空时,会显示空白,界面不友好,以下方式可以简单处理. <asp:repeater runat="server" id="rplist2& ...
- Android 与 iOS 推送 Push Notification 的区别
Android 安卓使用 GCM (Google Cloud Messaging) 接收推送,然后应用根据实际情况决定做什么反应,比如显示一个 Notification. 所以安卓下,推送 Push ...
- 【文文殿下】对后缀自动机(SAM)的理解
后缀自动机,是一种数据结构,是由状态和转移关系构成的.它虽然叫做后缀自动机,可是他却与后缀并没有什么太大的联系. 后缀自动机的每一种状态都是原串的一些子串的集合,每个子串只唯一存在于某个状态中,对每一 ...