javascript实现简单的全选和反选功能
更新时间：2016年01月05日 16:51:26 作者：Cakty、Riven
这篇文章主要介绍了javascript实现简单的全选和反选功能的相关资料,需要的朋友可以参考下
本文实例讲解了javascript实现简单的全选和反选功能的详细代码，分享给大家供大家参考，具体内容如下
效果图：
具体代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选</title>
</head>
<body>
<input type="button" value="全选" id="all">
<input type="button" value="反选" id="reverse">
<input type="checkbox" id="flagCheck">
<ul id="checkboxList">
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
</ul>
<p>
布尔属性，只要name即可，值可为空
checked,selected,readonly,disabled....
</p>
<script type="text/javascript">
//1.找节点
var allBtn = document.querySelectorAll("#all")[0];
var reverseBtn = document.querySelector("#reverse");
var flagCheck = document.getElementById("flagCheck");
var checkList = document.querySelectorAll("#checkboxList input");
function checkAll() {
for(var j = 0; j < checkList.length; j++) {
if(!checkList[j].checked) {
break;
}
}
if(j == checkList.length) {
// alert("全部为真")
flagCheck.checked = true;
}else {
// alert("至少一个不为真");
flagCheck.checked = false;
}
}
//2.加事件
//全选
allBtn.onclick = function() {
if(flagCheck.checked) {
flagCheck.checked = false;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = false;
}
}else {
flagCheck.checked = true;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = true;
}
}
}
//反选
reverseBtn.onclick = function() {
for(var i = 0; i < checkList.length; i++) {
if(checkList[i].checked) {
checkList[i].checked = false;
}else {
checkList[i].checked = true;
}
}
//执行检查所有checkList是否被选上了
checkAll();
}
for(var i = 0; i < checkList.length; i++) {
checkList[i].onclick = checkAll;
}
</script>
</body>
</html>
希望本文所述对大家学习javascript程序设计有所帮助。
相关文章
发现为本文起一个合适的标题还不是那么容易，呵呵，所以在此先说明下本文的两个目的.2009-11-11
这篇文章主要介绍了JavaScript如何将数据处理成树形结构问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要为大家详细介绍了swiper Scrollbar滚动条组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了JavaScript中的回调函数，想详细了解回调函数的同学，一定要看一下2021-04-04
本文主要介绍了分别使用javascript，jquery，css实现瀑布流布局的方法。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
这篇文章主要为大家分享一款所见即所得的富文本编辑器bootstrap-wysiwyg，并详细告诉大家文本编辑器bootstrap-wysiwyg的使用方法，感兴趣的小伙伴们可以参考一下2016-05-05
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
我同样也是个javascript新手，怎么说呢，先学的jquery，精通之后发现了javascript的重要性，再回过头来学javascript面向对象编程2012-03-03
这篇文章主要介绍了Smartour 让网页导览变得更简单(推荐)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
我们在调试过程使用的工具有：modheader,postman等，但这些工具都会存在的问题：缺少客户端里相应的设备信息；即使将cookie信息复制出来，也是存在过期的问题；多个设备之间切换时不方便；针对这些存在的问题，我基于websocket双向通信的特点，实现了多端桥接管理平台2021-05-05
这篇文章主要介绍了谈谈JS中常遇到的浏览器兼容问题和解决方法 ，有些代码在某些浏览器的某些版本中表现出不兼容，影响页面的体验；这时就需要处理了这些兼容问题，让页面在多个版本的浏览器上运行良好。2016-12-12
最新评论