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程序设计有所帮助。
相关推荐
-
js实现checkbox全选、不选与反选的方法
本文实例讲述了js实现checkbox全选.不选与反选的方法.分享给大家供大家参考.具体分析如下: 一.思路: 1. 获取元素 2. 给全选 不选 反选添加点击事件 3. 用for循环checkbox 4. 把checkbox的checked设置为true即实现全选 5. 把checkbox的checked设置为false即实现不选 6. 通过if判断,如果checked为true选中状态的,就把checked设为false不选状态,如果checked为false不选状态的,就把checked设
-
JS获得选取checkbox整行数据的方法
本文实例讲述了JS获得选取checkbox整行数据的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js</title> </head> <script language="java
-
JavaScript选取(picking)和反选(rejecting)对象的属性方法
有时候我们需要将一个对象的某些属性选取出来,比方说我们有一个用数组表示的数据库表,我们需要一些函数来 select (选取) 几个字段: function pick(obj, keys) { return keys.map(k => k in obj ? {[k]: obj[k]} : {}) .reduce((res, o) => Object.assign(res, o), {}); } const row = { 'accounts.id': 1, 'client.name': 'Joh
-
javascript下兼容firefox选取textarea文本的代码
主要用到的js代码 复制代码 代码如下: function getSelectedText(){ var selectedText; var textField=document.getElementById('inputTextarea'); if(window.getSelection) selectedText=getTextFieldSelection(textField);//getTextFieldSelection(document.
-
js选取多个或单个元素的实现代码（用class）
复制代码 代码如下: function getElementsByClassName(elem_name,elem_tags) { //elem_name:查询的class名,elem_tags:在哪个元素下查找 if(elem_tags == null) { elem_tags = '*'; } var all_elem = document.getElementsByTagName(elem_tags);//返回一个元素数组 var arr = []; //定义一个空数组,用于存放结果 fo
-
AngularJS实现全选反选功能
AngularJS是为了克服HTML在构建应用上的不足而设计的.HTML是一门很好的为静态文本展示设计的声明式语言,但要构建WEB应用的话它就显得乏力了.所以我做了一些工作(你也可以觉得是小花招)来让浏览器做我想要的事. 这里用到AngularJS四大特性之二----双向数据绑定 注意:没写一行DOM代码!这就是ng的优点,bootstrap.css为了布局,JS代码也只是简单创建ng模块和ng控制器 效果: <!DOCTYPE html> <html lang="en&quo
-
javascript实现鼠标选取拖动或Ctrl选取拖动
*{position:absolute;} #panel *{border:1px solid gray} /**********判断浏览器**********/ var isIE = false; if(document.all) isIE = true; /*******HashArray*******/ function HashArray(){ this.keyList = new Array(); this.put = function(key, value){ this[key] =
-
两种不同的方法实现js对checkbox进行全选和反选
通过两种不同的方法实现用js来对checkbox进行全选和反选: 方法一: 1:js实现checkbox的 全选 功能: 复制代码 代码如下: function checkAll() { var code_Values = document.getElementsByTagName("input"); for(i = 0;i < code_Values.length;i++){ if(code_Values[i].type == "checkbox") { c
-
js实现checkbox全选和反选示例
复选框全选示例 复制代码 代码如下: <input type="checkbox" name="selectall" value=on onclick="selectAll()"> function selectAll(form) { var obj = document.getElementsByName('selectall'); var cks = document.getElementsByTagName("inpu
-
ExtJS如何设置与获取radio控件的选取状态
获取 复制代码 代码如下: function IsChecked(radioId) { return Ext.getCmp(radioId).checked; } 设置 复制代码 代码如下: function SetRadio(radioId, isChecked) { Ext.getCmp(radioId).setValue(isChecked);//或者setValue("on")也可以设置为选中 }