`
月亮不懂夜的黑
  • 浏览: 154139 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jquery 多个checkbox的联动选择

jquerycheckbox 
阅读更多
jquery实现。多级checkbox的联动问题解决办法。注意引入jquery啊。
效果图如下：图片不知道怎么编辑进来，已经上传。可以看看样子。 
<!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 >&nbsp;&nbsp;&nbsp;类别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 >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类别1的1</td>
		</tr>
		<tr>
			<td ><input type='checkbox' name='checkboxType' id = 'thirdId_1_2' value='' onclick="check('thirdId_1_2');"></td>
			<td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类别1的2</td>
		</tr>
	</table>

	<table>
		<tr>
			<td ><input type='checkbox' name='checkboxStyle' id = 'secid_2' value=''  onclick="checkBoxTwo('2');"></td>
			<td >&nbsp;&nbsp;&nbsp;类别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 >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类别2的1</td>
		</tr>
		<tr>
			<td ><input type='checkbox' name='checkboxType' id = 'thirdId_2_2' value=' ' onclick="check('thirdId_2_2');"></td>
			<td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类别2的2</td>
		</tr>
		<tr>
			<td ><input type='checkbox' name='checkboxType' id = 'thirdId_2_3' value=' ' onclick="check('thirdId_2_3');"></td>
			<td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类别2的3</td>
		</tr>
	</table>
</body>

解释说明：页面中使用大量的table，除了带有id的两个外，别的只是为了格式需要。
该部分仍不是太完善，没有反向的判断。比如所有三级全部选中，对应的二级也要选中。所有的二级选中，对应的一级也需选中。
  • 大小: 2.1 KB
分享到：
| java中奇偶数的判断
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery input checkbox 联动

    假设我们有一个树状的结构，每个父级都有多个子级复选框，我们可以这样实现： ```javascript // 获取当前选中复选框的ID var checkedId = $(this).attr('id'); // 查找所有上级复选框 var parents = $(this)....

    JQuery操作checkbox、radio等示例

    Checkbox用于提供多选选项，用户可以勾选多个选项；而radio则是单选按钮，用户只能选择其中一个选项。 在jQuery中，操作这些元素通常涉及到选择它们，改变它们的状态，以及响应用户的交互。以下是一些常见的jQuery...

    jQuery操作checkbox

    在表单中，如果用户需要选择多个选项，我们通常会用到checkbox。使用jQuery实现多选，可以通过遍历所有checkbox并改变它们的checked属性。例如，以下代码将选中所有checkbox： ```javascript $('input[type=...

    checkbox二级联动-亲测有效

    复选框（Checkbox）是HTML中的一种表单元素，用户可以用来选择一个或多个选项。在HTML中，我们使用`&lt;input&gt;`标签来创建复选框，其type属性设置为"checkbox"。例如： ```html &lt;input type="checkbox" id="option1" ...

    Jquery实现省市区三级联动多选.zip

    5. 多选实现：使用多选框（checkbox）代替单选，用户可以选择多个区。需要监听多选框的`change`事件，记录已选中的区ID，同时更新显示已选结果。 四、优化与扩展 1. 动态加载：为了提高页面加载速度，可以使用Ajax...

    inputcheckbox连动

    @param LableIdString label 表标前缀 这个用于多个分级 如 当前为第一级中有 input[type='checkbox'] value = 1 如果下面有级 则在此inpu 下应该加入 &lt;label id='v1'&gt; 以此类推 调用方式 $("#ViewSetS")....

    jQuery多级复选框checkbox选中代码

    总的来说，这个项目涵盖了jQuery的基本使用、DOM操作、事件处理以及CSS布局等多个方面，是学习和实践jQuery多级复选框控制的一个良好实例。通过深入理解并实践这些代码，开发者可以更好地掌握前端交互设计，并能灵活...

    jquery checkbox

    复选框在网页表单中常用作用户可以选择一个或多个选项的交互控件。jQuery简化了DOM（文档对象模型）操作，使得对这些复选框进行选中、取消选中、状态检查等操作变得更加便捷。 在描述中提到了一个博客链接，虽然...

    jquery特效 商品SKU属性规格选择实时联动.docx

    在电商领域，商品的SKU（Stock Keeping Unit，库存量单位）管理是一项重要的工作，它涉及到商品的属性、价格和库存等多个方面。当用户在选购商品时，不同的属性组合会产生不同的SKU，如内存、颜色、版本等。为了提高...

    240多个jQuery UI插件

    - **jQuery controlled dependent (or Cascading) Select List**: 支持多级联动选择。 - **Multiple Selects**: 支持多选下拉列表。 - **Select box manipulation**: 对`&lt;select&gt;`元素进行操作和美化。 - **...

    jQuery支持多选三级联动菜单选中赋值代码.zip

    同时，为了实现多选，我们需要对`checkbox`的状态进行管理，确保用户可以同时选择多个选项。 4. **数据绑定和赋值**：在初始化或用户操作后，我们需要将选中的菜单项对应的值保存起来。这可以通过数组、JSON对象或...

    240多个jQuery插件

    3. Multiple File Uploadplugin：允许用户一次性上传多个文件。 4. jQuery File Style：美化文件输入元素。 5. Progress Bar Plugin：展示文件上传进度。 **表单验证插件**： 1. jQuery Validation：标准的表单验证...

    Asp.Net TreeView Checkbox

    总之，"Asp.Net TreeView Checkbox"是一个实现树形结构数据选择的功能，通过设置TreeNode的属性和编写前端脚本，可以创建一个具有父子级Checkbox联动的用户界面。这个功能在管理大量分类数据或进行多级选择操作的...

    jQuery地区树型菜单选择插件

    这种设计增加了用户交互性，使得用户可以一次性选择多个地区，并直观地查看所选结果。 关于**JQuery 树状菜单**的知识点： - **jQuery**：jQuery是一个快速、简洁的JavaScript库，简化了HTML文档遍历、事件处理、...

    jQuery三级联动菜单选中赋值代码.zip

    对于多选，`checkbox`元素可以同时选中多个。使用jQuery，我们可以轻松地获取选中项的值，例如： ```javascript var selectedValues = []; $("input[type='checkbox']:checked").each(function() { selectedValues...

    checkbox 选中一个另一个checkbox也会选中的实现代码

    总之，这个实现代码展示了如何通过 jQuery 实现 `checkbox` 之间的联动效果，包括全选、按列或行选择的逻辑，以及关联的文字提示更新。在实际项目中，可以根据具体需求调整这些代码，如增加更多列或者行，或者扩展到...

    240多个jQuery插件.doc

    - **jQuery-Linked Select**: 链接多个选择框，实现联动。 - **Auto-populate multiple select boxes**: 自动填充多选框。 #### 4. 表单基本、输入框、选择框等 - **jQuery Form Plugin**: 完整的表单处理插件。 - ...

    jQuery下拉单选多选城市选择代码.zip

    3. **多选支持**：对于某些需要用户选择多个城市的应用，可能提供多选功能，通过checkbox或者tag形式展示。 4. **搜索功能**：内置搜索框，允许用户快速找到目标城市，提升用户体验。 5. **异步加载**：如果城市数据...

    jQuery+layui多选框选择和美化特效

    在本文中，我们将深入探讨如何使用jQuery和layui插件实现多选框的选择和美化特效，特别是在处理父级子级结构的权限选择场景中。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...

Magicbox
Global site tag (gtag.js) - Google Analytics