月亮不懂夜的黑
- 浏览: 155506 次
- 性别:
- 来自: 北京
-
文章分类
- 全部博客 (88)
- java具体应用 (10)
- js (20)
- oracle安装问题 (1)
- java (22)
- linux (5)
- jquery (5)
- svg (2)
- xml (3)
- oracle 备份 (1)
- oracle (5)
- 闪回 (1)
- 数据还原 (1)
- Hibernate (4)
- Maven (1)
- tomcat (1)
- jsp (2)
- el (1)
- 事务 (2)
- 转载 (1)
- spring (3)
- String (1)
- int (1)
- iReport (1)
- jasperreport (1)
- 数据源 (1)
- vm (1)
- VMware Authorization Service (1)
- 分页 (1)
- 总页数 (1)
- sqlServer (1)
- 页面刷新 (1)
- office (2)
- jacob (2)
- poi (2)
- pdf (2)
- web (5)
- iframe (1)
- 电脑应用 (1)
- 运维 (1)
- windows (1)
- rsync (1)
- 数据库 (1)
- 左联接 (1)
- sql (3)
- ubuntu (0)
- os (0)
- ant (1)
- 多线程 (0)
- FTP (2)
- File (1)
- nginx，架构 (1)
- list (1)
- VUE (0)
- 下载 (1)
- mysql (2)
- 版本控制 (1)
- Git (2)
- webService (0)
- axis (0)
- BootStrap (1)
- Modal (1)
- Python (1)
最新评论
-
月亮不懂夜的黑：
masuweng 写道s = toUtf8String(s); ...
下载文件时，文件名乱码问题 -
masuweng：
s = toUtf8String(s); 这个方法怎么实现? ...
下载文件时，文件名乱码问题 -
月亮不懂夜的黑：
cxjhiueannn 写道查看addAll方法的实现其实并不 ...
list对象复制问题 -
cxjhiueannn：
查看addAll方法的实现其实并不是将后者的引用对象赋值给前面 ...
list对象复制问题 -
月亮不懂夜的黑：
terry813 写道其实还有另外一种SQL写法求指教
左联接数据不统一问题
jquery实现。多级checkbox的联动问题解决办法。注意引入jquery啊。
效果图如下：图片不知道怎么编辑进来，已经上传。可以看看样子。
解释说明：页面中使用大量的table，除了带有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" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<title></title>
<script src="jquery-1.6.2.js" type="text/javascript"></script>
<SCRIPT LANGUAGE="JavaScript" >
<!--
function checkboxall(){
if($("#oneCheck").attr("checked")=="checked"){ //全选
$("#oneCheck").attr("checked",true);
$("input[name='checkboxType']").each(function(){
$(this).attr("checked",true);
});
$("input[name='checkboxStyle']").each(function(){
$(this).attr("checked",true);
});
}else{ //取消全选
$("#oneCheck").attr("checked",false);
$("input[name='checkboxStyle']").each(function(){
$(this).attr("checked",false);
});
$("input[name='checkboxType']").each(function(){
$(this).attr("checked",false);
});
}
}
function checkBoxTwo(id){
var tabId = "sec_"+id;
var trId = "secid_"+id;
$("#oneCheck").attr("checked",false);
if($("#"+trId).attr("checked")=="checked"){
$("#"+tabId+" :input[type='checkbox']").each(function(){
$(this).attr("checked",true);
});
}else{
$("#"+tabId+" :input[type='checkbox']").each(function(){
$(this).attr("checked",false);
});
}
}
function check(trId){
var arr = trId.split("_");
var pid = "#secid_"+arr[1];
//var tabId = "#sec_"+arr[1];
$(pid).attr("checked",false);
$("#oneCheck").attr("checked",false);
//var len = $(tabId+" :input[type='checkbox']").length;
//to do continue
}
//-->
</SCRIPT>
</head>
<body>
<table>
<tr>
<td colspan='2'><input type='checkbox' name='checkboxPar' id = 'oneCheck' value='' onclick='checkboxall();'>全选</td>
</tr>
<tr>
<td ><input type='checkbox' name='checkboxStyle' id = 'secid_1' value='' onclick="checkBoxTwo('1');"></td>
<td > 类别1</td>
</tr>
</table>
<table id = 'sec_1'>
<tr>
<td ><input type='checkbox' name='checkboxType' id = 'thirdId_1_1' value='' onclick="check('thirdId_1_1');"></td>
<td > 类别1的1</td>
</tr>
<tr>
<td ><input type='checkbox' name='checkboxType' id = 'thirdId_1_2' value='' onclick="check('thirdId_1_2');"></td>
<td > 类别1的2</td>
</tr>
</table>
<table>
<tr>
<td ><input type='checkbox' name='checkboxStyle' id = 'secid_2' value='' onclick="checkBoxTwo('2');"></td>
<td > 类别2</td>
</tr>
</table>
<table id='sec_2'>
<tr>
<td ><input type='checkbox' name='checkboxType' id = 'thirdId_2_1' value='' onclick="check('thirdId_2_1');"></td>
<td > 类别2的1</td>
</tr>
<tr>
<td ><input type='checkbox' name='checkboxType' id = 'thirdId_2_2' value=' ' onclick="check('thirdId_2_2');"></td>
<td > 类别2的2</td>
</tr>
<tr>
<td ><input type='checkbox' name='checkboxType' id = 'thirdId_2_3' value=' ' onclick="check('thirdId_2_3');"></td>
<td > 类别2的3</td>
</tr>
</table>
</body>
解释说明：页面中使用大量的table，除了带有id的两个外，别的只是为了格式需要。
该部分仍不是太完善，没有反向的判断。比如所有三级全部选中，对应的二级也要选中。所有的二级选中，对应的一级也需选中。
- 大小: 2.1 KB
分享到：
发表评论
-
Ajax的get请求在IE浏览器中乱码问题的解决方案
2016-12-30 15:37 1540在web请求中可能涉及到ajax的get请求，参数为中文的 ... -
在循环中发送请求
2016-12-23 10:17 1131我们在前端开发的时候有时候会用到在loop中发送请求的情况。 ... -
鼠标滑过显示图片
2015-03-13 14:57 812当鼠标滑过某个制定位置，弹出div图片。移出，图片消失。 ... -
页面加载中效果实现
2015-03-13 14:50 5861、加载的loading.css @charset &q ... -
html5使用js确定用户坐标位置
2013-12-12 18:06 1902最近在微信平台开发时，涉及到的问题。如何获取用户当前坐标位置 ... -
ajax跨域报错
2013-12-11 21:37 3602在项目中使用ajax访问百度地图的api时，报 post ... -
js对浮点数计算的bug
2013-11-26 17:39 992在js中使用浮点数运算，有时候不能得到合适的结果。有时候会 ... -
页面元素自适应
2013-11-25 16:47 1112在html5下使得页面自适应，以满足不同浏览器下的大小适应 ... -
js对日期操作 获取两个日期的相差是否在几月之内
2013-08-29 10:25 2895一、js判断两个日期是否在几个月之内 //比较两 ... -
iframe高度的自适应
2013-08-22 16:40 988在项目开发中，遇到的一个问题。弹出的页面中有iframe。例 ... -
dtree在ie6下点击页面报错
2013-08-21 21:28 908在页面上使用window.showModalDialog时，在 ... -
js控制页面刷新大全
2013-07-20 14:05 923一点点补充 1、window.open之后，子页面关闭之前 ... -
index_jsp._jspInit
2013-02-27 10:45 1098项目运行时报错： java.lang.NullPointe ... -
js和Jquery对select的操作
2013-02-21 15:42 901jQuery获取Select选择的Text和Value: ... -
svg 鼠标形状 小手
2012-12-05 14:09 2024在最近做项目的时候，需要将svg上的鼠标点击之类的形状换 ... -
svg自定义菜单的动态实现
2013-02-21 15:52 1119svg自定义菜单的实现 svg也使用过几次了，但是仍不是 ... -
java与js的split方法
2012-08-20 17:48 2108最近在做项目时发现几个问题 1、java与js的split方法 ... -
js实时获取系统当前时间
2012-05-03 10:43 1754<script language="javas ... -
通过jsp实现word预览与打印
2011-11-07 16:56 2650前两天做通过数据库查询数据，再将数据导入已经存在的word模板 ...
相关推荐
假设我们有一个树状的结构，每个父级都有多个子级复选框，我们可以这样实现： ```javascript // 获取当前选中复选框的ID var checkedId = $(this).attr('id'); // 查找所有上级复选框 var parents = $(this)....
Checkbox用于提供多选选项，用户可以勾选多个选项；而radio则是单选按钮，用户只能选择其中一个选项。 在jQuery中，操作这些元素通常涉及到选择它们，改变它们的状态，以及响应用户的交互。以下是一些常见的jQuery...
在表单中，如果用户需要选择多个选项，我们通常会用到checkbox。使用jQuery实现多选，可以通过遍历所有checkbox并改变它们的checked属性。例如，以下代码将选中所有checkbox： ```javascript $('input[type=...
复选框（Checkbox）是HTML中的一种表单元素，用户可以用来选择一个或多个选项。在HTML中，我们使用`<input>`标签来创建复选框，其type属性设置为"checkbox"。例如： ```html <input type="checkbox" id="option1" ...
5. 多选实现：使用多选框（checkbox）代替单选，用户可以选择多个区。需要监听多选框的`change`事件，记录已选中的区ID，同时更新显示已选结果。 四、优化与扩展 1. 动态加载：为了提高页面加载速度，可以使用Ajax...
@param LableIdString label 表标前缀 这个用于多个分级 如 当前为第一级中有 input[type='checkbox'] value = 1 如果下面有级 则在此inpu 下应该加入 <label id='v1'> 以此类推 调用方式 $("#ViewSetS")....
总的来说，这个项目涵盖了jQuery的基本使用、DOM操作、事件处理以及CSS布局等多个方面，是学习和实践jQuery多级复选框控制的一个良好实例。通过深入理解并实践这些代码，开发者可以更好地掌握前端交互设计，并能灵活...
复选框在网页表单中常用作用户可以选择一个或多个选项的交互控件。jQuery简化了DOM（文档对象模型）操作，使得对这些复选框进行选中、取消选中、状态检查等操作变得更加便捷。 在描述中提到了一个博客链接，虽然...
在电商领域，商品的SKU（Stock Keeping Unit，库存量单位）管理是一项重要的工作，它涉及到商品的属性、价格和库存等多个方面。当用户在选购商品时，不同的属性组合会产生不同的SKU，如内存、颜色、版本等。为了提高...
- **jQuery controlled dependent (or Cascading) Select List**: 支持多级联动选择。 - **Multiple Selects**: 支持多选下拉列表。 - **Select box manipulation**: 对`<select>`元素进行操作和美化。 - **...
同时，为了实现多选，我们需要对`checkbox`的状态进行管理，确保用户可以同时选择多个选项。 4. **数据绑定和赋值**：在初始化或用户操作后，我们需要将选中的菜单项对应的值保存起来。这可以通过数组、JSON对象或...
3. Multiple File Uploadplugin：允许用户一次性上传多个文件。 4. jQuery File Style：美化文件输入元素。 5. Progress Bar Plugin：展示文件上传进度。 **表单验证插件**： 1. jQuery Validation：标准的表单验证...
总之，"Asp.Net TreeView Checkbox"是一个实现树形结构数据选择的功能，通过设置TreeNode的属性和编写前端脚本，可以创建一个具有父子级Checkbox联动的用户界面。这个功能在管理大量分类数据或进行多级选择操作的...
这种设计增加了用户交互性，使得用户可以一次性选择多个地区，并直观地查看所选结果。 关于**JQuery 树状菜单**的知识点： - **jQuery**：jQuery是一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、...
对于多选，`checkbox`元素可以同时选中多个。使用jQuery，我们可以轻松地获取选中项的值，例如： ```javascript var selectedValues = []; $("input[type='checkbox']:checked").each(function() { selectedValues...
在本文中，我们将深入探讨如何使用jQuery和layui插件实现多选框的选择和美化特效，特别是在处理父级子级结构的权限选择场景中。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...
- **jQuery-Linked Select**: 链接多个选择框，实现联动。 - **Auto-populate multiple select boxes**: 自动填充多选框。 #### 4. 表单基本、输入框、选择框等 - **jQuery Form Plugin**: 完整的表单处理插件。 - ...
总之，这个实现代码展示了如何通过 jQuery 实现 `checkbox` 之间的联动效果，包括全选、按列或行选择的逻辑，以及关联的文字提示更新。在实际项目中，可以根据具体需求调整这些代码，如增加更多列或者行，或者扩展到...
3. **多选支持**：对于某些需要用户选择多个城市的应用，可能提供多选功能，通过checkbox或者tag形式展示。 4. **搜索功能**：内置搜索框，允许用户快速找到目标城市，提升用户体验。 5. **异步加载**：如果城市数据...