jQuery实现的checkbox级联选择下拉菜单效果示例
本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果。分享给大家供大家参考，具体如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<script language="JavaScript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
<!--table 一行一列：table 三行一列：table 一行一列：table 三行一列：table-->
<table width="156">
<tr>
<td>
<table width="152">
<tr width="152">
<td>
<table width="152">
<tr>
<td>
<table width="98%" align="center">
<tr style="color:red;background:blue" onClick="show('1') ">
<td><img src="./ui/images/yonghu.png"></td>
<td>用户管理</td>
<td><img src="./ui/images/zhankai.png"></td>
</tr>
</table>
</td>
</tr>
<tr id="tr0_1" style="DISPLAY: none">
<td>
<table width="90%" align="center">
<tr>
<td><img src="./ui/images/yonghuxinxi.png"></td>
<td>用户信息</td>
</tr>
</table>
<table width="90%" align="center">
<tr>
<td><img src="./ui/images/juesequanxian.png"></td>
<td>角色权限</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr width="152">
<td>
<table width="152">
<tr>
<td>
<table width="98%" align="center">
<tr style="color:red;background:blue" onClick="show('2') ">
<td><img src="./ui/images/kehu.png"></td>
<td>客户管理</td>
<td><img src="./ui/images/zhankai.png"></td>
</tr>
</table>
</td>
</tr>
<tr id="tr0_2" style="DISPLAY: none">
<td><!-- 一列两个table-->
<table width="90%" align="center">
<tr>
<td><img src="./ui/images/kehuxinxi.png"></td>
<td>客户信息</td>
</tr>
</table>
<table width="90%" align="center">
<tr>
<td><img src="./ui/images/lianxiren.png"></td>
<td>联系人列表</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr width="152">
<td>
<table width="152">
<tr>
<td>
<table width="98%" align="center">
<tr style="color:red;background:blue" onClick="show('3')">
<td><img src="./ui/images/xitong.png"></td>
<td>系统管理</td>
<td><img src="./ui/images/zhankai.png"></td>
</tr>
</table>
</td>
</tr>
<tr id="tr0_3" style="DISPLAY: none">
<td>
<table width="90%" align="center">
<tr>
<td><img src="./ui/images/xitongrizhi.png"></td>
<td>系统日志</td>
</tr>
</table>
<table width="90%" align="center">
<tr>
<td><img src="./ui/images/shujuzidian.png"></td>
<td>数据字典</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<script language="JavaScript">
<!--js dom: 根据tr0_id, id的值，进行操作。得到tr的length，遍历，判断id值，根据传入的id值，拼装tr0_id,-->
<!--拿到对应的tr元素，设置 显示或隐藏 -->
function show(id){
//使用循环遍历找到需要控制的所有隐藏的tr
var $tr = $("tr[id^='tr0']");
// alert($tr.length);
$tr.each(function(index,domEle){
//查找当前onclick操作的tr
//检查 每次循环遍历 操作要对应的tr，隐藏的，就三个，看看是哪一个
//
if(id==index+1){
//如果当前的tr处于隐藏状态，就得显示
if($(this).is(":hidden")){
$(this).attr("style","DISPLAY: block");
}
//如果当前的tr处于显示状态，就得隐藏
else{
$(this).attr("style","DISPLAY: none");
}
}
<!--把其他的打开的 隐藏 每次都会遍历-->
else{
//将不选择的tr都隐藏
$(domEle).attr("style","DISPLAY: none");
}
})
}
</script>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery切换特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery设置和获取select、checkbox、radio的选中值方法
select.checkbox.radio是很常用的表单控件,熟练掌握操作它们的方法,会加快我们的开发速度. 设置单选下拉框的选中值 如果option中没有value属性,那可以通过text设置选中项; 如果option中有value属性,那必须通过value设置选中项. 1)option中没有value属性: <select id="single"> <option>选择1号</option> <option>选择2号</opti
-
jquery操作checkbox火狐下第二次无法勾选的解决方法
最近在学习jQuery(版本jquery-1.9.1.js),要求用jQuery实现全选/全不选.反选,在IE(IE8)中没有问题,但在火狐浏览器中调试的时候出现了一些小问题,达不到效果. html代码如下: <div> 你爱好的运动是 <input type="checkbox" id="selectal1" /><label for="selectal1">全选/全不选</label><b
-
jQuery操作复选框(CheckBox)的取值赋值实现代码
1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $("input:[type='checkbox']:checked").val(); 或者 $("input:[name='ck']:checked").val(); 2. 获取多个checkbox选中项: $('input:checkbox').each(function() { if ($(this).attr('c
-
jQuery实现CheckBox全选、全不选功能
废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery实现CheckBox全选.全不选</title> <script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/jav
-
jQuery实现点击行选中或取消CheckBox的方法
本文实例讲述了jQuery实现点击行选中或取消CheckBox的方法.分享给大家供大家参考,具体如下: /// <summary> /// 点击行选中或者取消CheckBox /// </summary> /// <param name="TableID">表ID</param> function SetCheckBox_Check(TableID) { var $TableID = TableID == "" ? &
-
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
本文实例讲述了jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法.分享给大家供大家参考,具体如下: 先看如下代码: /** * 全选 */ function checkAll() { $("input[name=ids]").attr("checked", true); } /** * 全不选 */ function uncheckAll() { $("input[name=ids]&quo
-
jquery处理checkbox（复选框）是否被选中实例代码
jquery处理checkbox(复选框)是否被选中 现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能正常使用,但是现在必须使用prop()方法代替 实例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&q
-
jQuery实现的checkbox级联选择下拉菜单效果示例
本文实例讲述了jQuery实现的checkbox级联选择下拉菜单效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title></title> <script language="JavaScript" src="jq
-
jQuery实现灰蓝风格标准二级下拉菜单效果代码
本文实例讲述了jQuery实现灰蓝风格标准二级下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的标准型二级菜单,是漂亮的灰-蓝风格下拉级联菜单,代码经过了完美修正,目前兼容性已经很不错了,甚至不用修改,拷贝代码你就可以用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-blue-color-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &quo
-
jquery实现简单的二级导航下拉菜单效果
本文实例讲述了jquery实现简单的二级导航下拉菜单效果.分享给大家供大家参考.具体如下: jQuery代码实现的二级导航菜单效果,非常简洁,喜欢简洁风格的朋友您可以下载哦.菜单最多支持两级,CSS的配合也是挺重要的,不多说了,要代码的就直接复制吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2jxl-menu-codes/ 具体代码如下: <title>jquery二级导航菜单</title> <styl
-
jQuery实现的精美平滑二级下拉菜单效果代码
本文实例讲述了jQuery实现的精美平滑二级下拉菜单效果.分享给大家供大家参考,具体如下: 这是一款jQurey实现的向下二级导航菜单效果.效果非常不错,由上到下平滑延伸,给人的感觉协调唯美!js与html代码结构简单明了,便于使用与修改! 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
-
jQuery实现的导航下拉菜单效果示例
本文实例讲述了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"> <h
-
jquery仿QQ登录账号选择下拉框效果
QQ登录的时候,可以选择以前登录过的账户,这个东西也可以在网站登录的时候用到,所以我就想做一个这样的插件:在网上查了很多,没有找到合适自己的,所以决定自动制作一个. 原理就是一个textbox加一个ul模拟下拉框,用font模拟一个下拉按钮. 一.制作静态效果 先用css和html,做出一个应该有的样子.这里这两个我使用的是字体,可以在icomoon网站上面自己制作.用字体的好处是和输入框定位很方便,而且还可以控制大小颜色等,唯一的不足是IE6和IE7由于不支持:before选择器,导致无法显示
-
js实现全国省份城市级联下拉菜单效果代码
本文实例讲述了js实现全国省份城市级联下拉菜单效果代码.分享给大家供大家参考.具体如下: 这是一个大家都知道的网页小功能,很常见,全国省份与城市级联菜单,采用Select下拉的方式选择数据,不过现在很多都Ajax了,貌似这种老形式已经过时了,不过在兼容性方面,仍然是不落后的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-conv-city-xl-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLI
-
jQuery中select与datalist制作下拉菜单时的区别浅析
一般我们通常使用select制作下拉菜单,但是H5之后,datalist也可以充当select的角色,而且两者还有一点小的不同. 对于select来说,select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加. 但是datalist就不同了,datalist不仅可以供用户选择,用户还可以自己输入,而且datalist还可以达到模糊匹配的效果,使用很方便. 据代码示例如下: <input type="text" list="addr"/>
-
jQuery实现的导航下拉菜单效果
本文实例讲述了jQuery实现的导航下拉菜单效果.分享给大家供大家参考,具体如下: 1.效果如图所示: 2.html代码: <div id="navigation"> <ul> <li><a href="#">首 页</a></li> <li><a href="#">衬 衫</a> <ul> <li><a hr
-
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
本文实例讲述了jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款黑红带渐变的网站下滑导航菜单,基于jquery实现的下滑线导航菜单,鼠标经过主菜单的时候,下滑线就会自动跟向哪里,如果该菜单有两级子菜单,则同样会显示下滑菜单,带渐变效果.菜单操作很灵敏,使用有自定义的封装插件SuperSlide.2.1.js,所在使用时请自行下载这个JS插件. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015