JS操作checkbox http://honeyao.iteye.com/blog/238424
翻页后保持checkbox选中状态的实现方法：在界面中，使用纯js完成。把选中的checkbox中的id，其中包括模块id，操作id，拼接成一个字符串，然后把字符串传递提交
<!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>用图片模拟checkbox三种状态,图片checkbox和checkbox的联动</title>
<script language="javascript">
//图片checkbox全选和全不选,控制两个checkbox的函数
function img_cb_choose(elmId, elmCldNm) {
var value = document.getElementById(elmId).value; //取出图片的值,通过这个值判断图片CheckBox的三个状态
var checkbox_array = document.getElementsByName(elmCldNm); //取出checkbox数组数
if (value == "default") { //图片checkbox 如果是默认不选,就变成全选
checkBoxAllStyle(elmId);
choose(checkbox_array, false, true);
} else if (value == "all") { //图片checkbox 如果是全选,就变成不选
checkBoxEmptyStyle(elmId);
choose(checkbox_array, true, false);
} else if (value == "half") { //图片checkbox 如果是半选,就变成不选
checkBoxEmptyStyle(elmId);
choose(checkbox_array, true, false);
}
}
function checkBoxAllStyle(elmId){
document.getElementById(elmId).src = "images/iconCheckAll.gif";
document.getElementById(elmId).value = "all";
}
function checkBoxHalfStyle(elmId){
document.getElementById(elmId).src = "images/iconCheckGray.gif";
document.getElementById(elmId).value = "half";
}
function checkBoxEmptyStyle(elmId){
document.getElementById(elmId).src = "images/iconUnCheckAll.gif";
document.getElementById(elmId).value = "default";
}
//checkbox 控制图片checkbox
function change(elmId, elmCldNm) {
var checkValues = new Array();
var checkbox_array = document.getElementsByName(elmCldNm); //取出checkbox数组
var str_length = 0; //选择checkbox的个数
var checkbox_length = checkbox_array.length; //数组的长度
for (i = 0; i < checkbox_length; i++) {
if (checkbox_array[i].checked == true) {
str_length++;
checkValues.push(checkbox_array[i].value);
}
}
if (str_length == 0) { //默认 全选
checkBoxEmptyStyle(elmId);
} else if (str_length < checkbox_length) { //半选状态,点击后变成全不选.
checkBoxHalfStyle(elmId);
} else if (str_length == checkbox_length) { //全不选
checkBoxAllStyle(elmId);
}
//getCheckListInfo(checkValues, str_length);
console.log("选中的值："+checkValues+",选择checkbox的个数:"+str_length);
}
//传入一个CheckBox,现在的状态,要改变的状态
function choose(checkbox_array, status, new_status) {
var checkValues = new Array();
for (i = 0; i < checkbox_array.length; i++) { //循环所有数组
if (checkbox_array[i].checked == status) //现在checkbox的状态
{
if(new_status){
checkValues.push(checkbox_array[i].value);
}
checkbox_array[i].checked = new_status; //改变后的状态
}
}
console.log("选中的值："+checkValues);
}
</script>
</head>
<body>
<div id="main">
<div id="images_checkbox">
<input id="img_checkbox" type="image" src="images/iconUnCheckAll.gif"
onclick="img_cb_choose('img_checkbox','checkbox1');" value="default" />
</div>
<div>
<input name="checkbox1" type="checkbox" value="1" onclick="change('img_checkbox','checkbox1');"
/>
<br />
<input name="checkbox1" type="checkbox" value="2" onclick="change('img_checkbox','checkbox1');"
/>
</div>
</div>
</body>
</html>
相关推荐
本实例将详细讲解如何实现CheckBox控件的三种状态：未选中、已选中以及灰色禁用状态，并探讨它们在实际应用中的配置和事件处理。 1. CheckBox的基本结构： CheckBox控件在界面中通常表现为一个小方框，里面可能有...
本文将深入探讨如何实现一个具有三种状态的纯Material风格的Android Checkbox控件，以及与之相关的Android开发知识。 Checkbox在Android中通常用于提供多选选项，它的默认状态只有两种：选中和未选中。然而，有时...
"Flex模拟CheckBox多状态切换"就是这样一个例子，它扩展了标准的CheckBox组件，提供了√、×、和○三种状态供用户选择，以实现更丰富的交互体验。在本文中，我们将深入探讨如何在Flex中实现这样的功能。 首先，我们...
"DuiLib_CheckBox"是针对DuiLib中的CheckBox控件进行的一种功能扩展，使得CheckBox能够支持全选、全不选以及非全选这三种状态。 在传统的CheckBox控件中，通常只有两种状态：选中（Checked）和未选中（Unckecked）...
C# TreeView无限递归绑定 CheckBox 加入 CheckBox 事件
4. **监听CheckBox状态改变**：为每个CheckBox添加CheckedChangeListener，当CheckBox状态改变时，更新对应数据列表中的状态，并调用notifyDataSetChanged()通知ListView数据已更新。 5. **处理点击事件**：...
这个主题主要围绕如何实现Checkbox的三种状态：选中、未选中和模糊（或称为灰色、不确定状态）。 Checkbox的常规状态只有两种：选中（checked）和未选中（unchecked）。然而，在某些应用场景下，如多级选择或者部分...
2. **事件传递**：使用事件总线（如EventBus或 Otto）或者回调函数来处理Checkbox状态改变的事件传递。 3. **性能优化**：合理使用ViewHolder模式减少视图查找的开销，以及避免不必要的数据刷新。 4. **异步处理**...
它接受一个`Qt::CheckState`枚举值作为参数，该枚举定义了三种状态：`Qt::Unchecked`(未选中)，`Qt::Checked`(选中)，以及`Qt::PartiallyChecked`(三态，通常用于表示不确定状态)。例如，如果你想将一个`CheckBox`...
复选框是用户界面中一种允许用户进行多项选择的控件，其状态通常有两种：选中（checked）和未选中。在本文中，我们将深入探讨如何使用JavaScript来改变checkbox的选中状态。 首先，我们需要了解HTML中的`<input>`...
实现Treeview Checkbox的三种状态，分别是：选中、没有选中、部分选中。之前有人写了一部分实现Treeview Checkbox第三种状态的代码，但是在点击节点前的“+”或者“-”的时候，也会改变这个节点及其子节点的选中状态...
然而，三态复选框增加了第三种状态——不确定或部分选中，这在某些情况下非常有用，比如当子节点有不同状态时，父节点可以反映出这种混合状态。 "级联3.htm"和"CascadeSelect.js"这两个文件可能分别是一个HTML页面...
本主题将深入探讨“treeview 复选框 三种状态”，以及如何在实际应用中实现和管理这些状态。 1. TreeView 复选框概述： TreeView控件的复选框功能允许用户对节点进行选择，而不仅仅是单击或展开/折叠。复选框通常...
解决方案可能涉及在后端处理checkbox状态，通过`ServicesOA`和`BFOA`进行服务层和业务逻辑层的操作，`DAOA`可能负责与数据库的交互，而`ESFM.Control`和`ESFM.Public`可能包含了用户界面控件和公共函数。 总的来说...
然而，在处理包含复选框（CheckBox）的ListView时，开发者经常会遇到一些棘手的问题，比如复用的convertView导致的checkbox状态错乱。本文将深入探讨如何解决这个问题，并进行相应的内存优化。 一、ListView的工作...
在这里checkbox状态已经和显示状态不一致了 以后每次双击，checkbox显示的状态会出现一次切换，AfterCheck也会触发一次，并且checkbox显示的状态和值的状态仍然保持相反。 除上面这个问题外，还有一点，当双击...
当应用于三态checkbox时，每个节点不仅可以被全选、全不选，还可以处于一种“部分选中”的状态，这在处理子节点状态不一致的情况时非常有用。例如，父节点可以反映出其所有子节点的状态综合：如果所有子节点都选中，...
在这些复选框中，通常存在三种可能的状态：未选中、选中以及部分选中。本篇文章将深入探讨`TreeView`控件中复选框的第三种状态——部分子节点被选中的实现和应用场景。 首先，我们需要理解`TreeView`控件的基本操作...
通过以上方法，我们可以有效地解决ListView复用导致的Checkbox状态混乱问题。在实际开发中，理解ListView的工作原理以及如何正确处理组件状态是非常重要的，这不仅可以提高用户体验，还能保证应用的稳定性和效率。