<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript check box 全选及部分选择</title>
<script type="text/javascript">
var Erit;
window["undefined"]=window["undefined"];
if (!Erit) {
Erit = {};
} else if (typeof Erit != "object") {
throw new Error("This namespace has been registered.");
} else if (Erit.newClass) {
throw new Error("The newClass has been created.");
}
Erit.SetCheckAll = function (){};
Erit.addLoadEvent = function(obj, evt, fn){
if(obj.addEventListener) {
obj.addEventListener(evt, fn, false);
}
else if(obj.attachEvent) {
obj.attachEvent('on'+evt, fn);
}
};
Erit.SetCheckAll.prototype = {
checkObj : null,
flag : 0,
init: function(name, eid){
this.checkObj = this.getInputList(name);
var C = this.checkObj;
var cl = C.length;
var oThis = this;
this.flag = 0;
var Eid = this.get(eid);
this.get(eid).onclick = function (){
oThis.setEvent(this,C);
};
for (var i = 0;i < cl;i++){
C[i].onclick = function (){
oThis.setChAllStatus(this,Eid,cl);
}
}
},
get: function(id){
return document.getElementById(id);
},
getInputList: function(name){
return document.getElementsByName(name);
},
setEvent: function(oThis, C){
var cl = C.length;
if (oThis.checked) {
for (var i = 0; i < cl; i++) {
C[i].checked = true;
if (this.flag < cl) {
this.flag++;
}
}
} else if (!oThis.checked) {
for (var j = 0; j < cl; j++) {
C[j].checked = false;
if (this.flag > 0) {
this.flag--;
}
}
}
},
getSelectValue:function (){
var chObj = this.checkObj;
var cl = chObj.length;
var chva = [];
for (var i = 0;i < cl;i++){
if(chObj[i].checked == true){
chva.push(chObj[i].value);
}
}
return chva;
},
setChAllStatus:function (oThis,e,l){
if (oThis.checked == true){
if (this.flag <= l) {
this.flag++;
}
} else if (oThis.checked == false){
if (this.flag >= 0) {
this.flag--;
}
}
for (var j = 0;j < l;j++){
if (this.flag == l) {
e.checked = true;
} else {
e.checked = false;
}
}
}
};
Erit.addLoadEvent(window,"load",function (){
var er = new Erit.SetCheckAll();
er.init("chk","chk5");
er.get("btn1").onclick = function (){
alert(er.getSelectValue());
}
});
</script>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1" />
</td>
<td>
aaaaaa
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk1" name="chk" value="1" />
</td>
<td>
aaaaaa
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk2" name="chk" value="1" />
</td>
<td>
aaaaaa
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk3" name="chk" value="1" />
</td>
<td>
aaaaaa
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk4" name="chk" value="1" />
</td>
<td>
aaaaaa
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="chk5" name="chk5" />全选
</td>
<td>
</td>
</tr>
</table>
<input type="button" id="btn1" name="btn1" value="ok"/>
</body>
</html>
分享到：
相关推荐
实现这种批量选择的方法往往是使用 JavaScript，通过在每条记录前面加一个复选框，然后在列表下方放置一个“全选/全不选”复选框。 实现批量选择的思路是： 1. 在每条记录前面加一个复选框，该复选框的值为“id|...
在JavaScript中，实现复选框（checkbox）全选的功能是一个常见的需求，特别是在处理表单或者数据筛选时。这里我们详细探讨如何使用JavaScript实现这个功能，以及两种不同的调用方法。 首先，我们需要创建一个名为`...
在本案例中，主要涉及到了如何通过 JavaScript 和 JSP 实现 checkbox 的选中效果，具体包括“选中子项时，父项自动被选中；选中父项时，所有子项自动被选中”。 #### 1.1 HTML 结构 ```html [${i}]" value="${list....
function CheckAll(){ if(a==1) { for(var i=0;i<window.document.form1.elements.length;i++) { var e = form1.elements[i]; e.checked =false; } a=0; } else { for(var i=0;i<window.document.form1....
在“jquery-multi-check-selectbox”这个压缩包中，包含了我们改造后的代码。这个扩展增加了全选按钮，当用户点击“全选”时，所有选项都会被选中；反之，点击“全不选”则会取消所有选中的项。这样的设计极大地提高...
这里我们将详细讲解如何使用jQuery实现全选和反选的功能，并对比JavaScript的实现方式。 首先，我们来看jQuery的全选方法。以下是一个简单的示例函数`CheckAll`： ```javascript function CheckAll(val) { $('...
在JavaScript中，全选和多选功能是常见的交互元素，常用于表单或列表中，允许用户一次性选择多个项目。本示例代码提供了一个全面的解决方案，包括全选、反选和单选的控制。以下是对该代码的详细解释： 首先，HTML...
2. checkbox全选和反选是web开发中常见的功能，一般用于多选项列表，允许用户选择全部项目或取消选择所有项目。 3. 实现全选和反选的基本原理是：获取所有checkbox的DOM对象，并通过循环设置它们的checked属性为true...
今天在实现checkbox全选，反选，取消JavaScript小脚本的时候，总是出现点击后页面瞬间刷新，选择的checkbox全部取消的问题，debug了半天，才发现原来是<button>标签中少写了一个type属性的原因，郁闷啊，希望...
这里，子复选框的`class`与全选复选框的`data-check-target`值匹配，确保了当全选复选框的状态改变时，可以正确地影响到对应的子复选框。 总的来说，这个例子巧妙地利用了jQuery的事件绑定和自定义属性，实现了复选...
在JavaScript中，Avalon.js是一个轻量级的MVVM框架，它提供了强大的数据绑定功能，使得前端开发更加高效和简洁。在这个例子中，我们关注的是如何使用Avalon的`duplex`双向数据绑定来实现checkbox全选的功能。双向...
通过以上实例，我们了解了如何使用JavaScript结合HTML和CSS来实现`checkbox`的基本操作，包括全选、部分选等。这对于实际的Web应用开发非常有用，特别是在涉及到用户数据管理或筛选的情况下。希望本示例能帮助读者...
在jQuery中，处理复选框（CHECKBOX）的全选和反选操作是常见的需求，尤其是在数据筛选或批量操作的场景下。这里介绍一个官方提供的函数`CheckboxGroup`，它简化了这一过程。该函数在2018年6月18日的最新版本中发布，...
对于全选功能，可以使用`react-native-check-box`或`react-native-multiple-choice`库，它们提供了多选框组件。删除功能可以通过调用设备API来实现，如`react-native-document-picker`可以读取文件并删除。分享功能...
在网页开发中，全选框（check all box）是一个常见的功能，它允许用户一键选中或取消选中页面上的所有复选框。本教程将详细讲解如何使用jQuery来实现这样一个功能。 首先，我们需要一个HTML结构来展示数据。在这个...
在网页开发中，jQuery 是一个广泛使用的 JavaScript 库，它...3. 使用 jQuery 选择器和事件监听来实现全选/取消全选的逻辑。 4. 在 `click` 事件处理函数中，根据 "checkedAll" 复选框的状态更新其他复选框的选中状态。
<p id="checkall">全选 <input type="checkbox"><br/> <input type="checkbox"><br/> <input type="checkbox"><br/> <input type="checkbox"><br/> <input type="checkbox"><br/> <input type="checkbox"><br...
示例中，复选框被包含在`<div id="box">`中，这使得可以通过CSS选择器轻松地访问它们。`<input type="checkbox" id="allChecked">`、`<input type="checkbox" id="invertChecked">`和`...
关键在于，我们需要为CheckAll的CheckedChanged事件绑定一个处理函数CheckAll_CheckedChanged，以便当全选Checkbox的状态改变时，能够更新所有行的Checkbox状态。同时，每个CheckBox1也有一个CheckedChanged事件，...
在网页开发中，jQuery库提供了一种简便的方式来操作DOM元素，包括处理复选框（checkbox）的选择状态。在本示例中，我们将讨论如何使用jQuery实现全选/取消全选的功能，以及如何获取选中复选框的值。 首先，jQuery...