<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
function checkMain( m){
var flag=$(m).attr("checked");
$(m).parent().next().find("input[type=checkbox][name=menu]").attr("checked",flag);
}
function checkSub(n){
var flag=$(n).attr("checked");
if(flag){
$(n).parent().parent().parent().prev().find("input[type=checkbox][name=menu]").attr("checked",flag);
}else{
var size=$(n).parent().parent().parent().find("input:checked[type=checkbox][name=menu]").size();
if(size==0){
$(n).parent().parent().parent().prev().find("input[type=checkbox][name=menu]").attr("checked",false);
}
}
}
function selectAll(){
$("input[type=checkbox][name=menu]").attr("checked",true);
}
function unSelect(){
$("input[type=checkbox][name=menu]").attr("checked",false);
}
</script>
</head>
<body>
<ul>
<li>
<div>
<input type="checkbox" name="menu" onclick="checkMain(this)" />
菜单1
</div>
<ul>
<li>
<div>
<input type="checkbox" name="menu" onclick="checkSub(this)" />
菜单1.1
</div>
</li>
<li>
<div>
<input type="checkbox" name="menu" onclick="checkSub(this)" />
菜单1.2
</div>
</li>
<li>
<div>
<input type="checkbox" name="menu" onclick="checkSub(this)" />
菜单1.3
</div>
</li>
</ul>
</li>
<li>
<div>
<input type="checkbox" name="menu" onclick="checkMain(this)" />
菜单2
</div>
<ul>
<li>
<div>
<input type="checkbox" name="menu" onclick="checkSub(this)" />
菜单2.1
</div>
</li>
<li>
<div>
<input type="checkbox" name="menu" onclick="checkSub(this)" />
菜单2.2
</div>
</li>
</ul>
</li>
<li>
<div>
<input type="checkbox" name="menu" onclick="checkMain(this)" />
菜单3
</div>
</li>
</ul>
<input type="button" value="全选" onclick="selectAll()"></input>
<input type="button" value="不选" onclick="unSelect()"></input>
</body>
</html>
分享到：
相关推荐
### 使用jQuery实现复选框全选、反选、取消及选中值输出功能 #### 一、背景介绍 在Web开发中，复选框（Checkbox）是常用的表单元素之一，用于收集用户的选择数据。然而，传统的HTML复选框功能较为单一，无法满足...
jQuery多选框插件通常是开发者为了改进原生HTML复选框（）的样式和功能而创建的。这些插件通过CSS和JavaScript增强用户体验，例如添加可自定义的样式、分组选项、搜索过滤、拖放排序等功能。在这个特定的案例中，...
每个子复选框可能有唯一的 `id` 或者共享一个类名，以便于 jQuery 选取。 ```html <input type="checkbox" id="selectAll"> 全选 ``` 2. **jQuery 代码**： 使用 jQuery 绑定点击事件到 "全选" 复选框，...
总结，"jQuery添加购物车复选框"是一个典型的前端交互案例，它涵盖了jQuery的基本用法、事件处理、DOM操作以及数据计算等多个方面。通过学习和实践此类案例，开发者可以提升自己在Web开发中的技能，更好地满足用户对...
在这个案例中，我们将探讨如何使用jQuery来实现美化版的单选框（radio）和复选框（checkbox），创建出一种简洁而清爽的样式风格。 首先，我们要明白jQuery的基本用法。jQuery通过选择器选取DOM元素，然后应用各种...
本篇文章将详细介绍一个特定的复选框功能实现案例，其中包括如何通过JavaScript/jQuery实现“全选/全不选”功能以及前后端如何交互以获取选中的复选框值。 #### 二、全选/全不选功能实现 ##### 2.1 HTML结构 在...
总的来说，"jQuery自定义单选按钮复选框样式特效"是一个关于网页表单元素美化的基本实践，涉及到HTML结构、CSS样式设计以及jQuery事件处理的综合运用。这个教程对于想要提升网站用户体验和视觉吸引力的初学者来说是...
在本文中，我们将探讨如何利用JavaScript（简称JS）和jQuery框架来实现一个实用的功能：通过选择一个主复选框来控制其他多个复选框的状态以及关联文本框的显示与隐藏。该功能在用户界面设计中非常常见，尤其是在表单...
在本项目中，我们关注的是一个使用jQuery实现的精美的单选框和复选框效果。这个Demo展示了如何通过JavaScript库来增强HTML元素的视觉吸引力和交互性，使其更加用户友好。以下是关于这个Demo源码的关键知识点： 1. *...
这个案例展示了如何使用jQuery改进表单元素的视觉样式，特别是复选框和单选按钮，使用户界面更加现代和吸引人。 5. **Sortables demo（拖拽插件，37 - Sortables demo 拖拽插件.htm）** jQuery UI Sortables 允许...
这个"jquery插件库-jquery添加购物车复选框，全选，反选，取消商品数量统计.zip"文件包含了一个专门针对购物车功能的jQuery插件，用于实现复选框的操作，如全选、反选和商品数量的统计。 1. **jQuery插件**：jQuery...
本项目正是关于如何使用jQuery和CSS技术来创建逼真的iPhone风格的单选框和复选框，使得网页上的交互更加贴近iOS系统的原生感觉。通过这种方式，即使在非iOS设备上，用户也能感受到接近于iPhone的使用体验。 首先，...
这些文件共同构成了一个简单的jQuery应用，用于实现弹出框内的多选复选框功能。 首先，`index.html`是网页的主文件，它包含了页面结构和内容。在HTML中，我们会看到一个触发弹出框的按钮和一些隐藏的元素，比如用于...
在这个案例中，可能有一个名为"script.js"的文件，用于实现多级复选框的逻辑。jQuery的事件监听、DOM操作和数据处理等功能将在这里发挥作用。例如，开发者可能会使用`$(document).ready()`来确保页面加载完毕后再...
在前端开发中，表格（Table）是展示数据的常用组件，而复选框（Checkbox）则是用户交互的重要元素。...这个"tableRow 表格与复选框配合jquery插件"是一个很好的学习和实践案例，可以帮助开发者提升前端交互体验。
在JavaScript编程中，下拉多选框和复选框是常见的用户交互元素，它们用于收集用户的多选项选择信息。在本项目中，我们探讨的是如何使用纯JavaScript实现一个功能丰富的下拉多选框，而不是依赖于像jQuery这样的库，...
本案例主要涉及了如何在JSP页面中使用复选框（checkbox）收集用户的选择，并通过jQuery进行数据处理。 首先，复选框在HTML中通常用于让用户多选一个或多个选项。在JSP中，我们可以使用`<input type="checkbox" />`...
这个项目中的"jQuery模拟iphone单选框复选框效果.zip"包含了一个简单的示例，其中包括了HTML、CSS图像和JavaScript文件，它们共同作用于创建与iPhone原生UI相仿的表单元素交互体验。 首先，`index.html`文件是整个...
本文将深入探讨“jquery操作表单案例”中的关键知识点，包括输入元素(input)、文本区域(textarea)、单选按钮(radio)、复选框(checkbox)以及选择列表(select)的操作，特别是如何根据选择列表的文本值(text)来选定选项...
总结来说，“jQuery自定义单选按钮复选框样式特效”是一个集成了jQuery、CSS和HTML技术的实用项目，它展示了如何通过这些工具提升网页元素的视觉吸引力和交互性。通过深入研究这个项目，我们可以更好地理解和运用...