`

Checkbox触发隐藏或显示 javascript checkbox事件【转】

阅读更多

 

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>javascript判断单选框或复选框是否选中方法,checkbox javascript 事件</title>
<style type=text/css>
<!--
BODY{
margin:0px;
FONT-SIZE: 12px;
FONT-FAMILY: "宋体", "Verdana", "Arial", "Helvetica", "sans-serif";
background-color: #ffffff;/*#BEBFD9;*/
scrollbar-face-color: #EAEAF2;
        scrollbar-highlight-color: #FFFFFF;
        scrollbar-shadow-color: #9395C0;
        scrollbar-3dlight-color: #F3F3F8;
        scrollbar-arrow-color: #9395C0;
        scrollbar-track-color: #F3F3F8;
        scrollbar-darkshadow-color: #F3F3F8;
}
table { border:0px; }
td { font:normal 12px 宋体; }
img { vertical-align:bottom; border:0px; }
a { font:normal 12px 宋体; color:#111111; text-decoration:none; }
a:hover { color:#6C70AA;text-decoration:underline; }
.sec_menu { border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid white; overflow:hidden; background:#FBFBFC; }
.menu_title { }
.menu_title span { position:relative; top:2px; left:8px; color:#4A4F80; font-weight:bold; }
.menu_title2 { }
.menu_title2 span { position:relative; top:2px; left:8px; color:#596099; font-weight:bold; }
input,select,Textarea{
font-family:宋体,Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}
.admin_tab_title { background: #8486B7; color:#FFFFFF; padding:5px;}
-->
</style>
</head>
<body><br>
提示:getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合。<br>
<br>

<table width='770' border='0' align='center' cellpadding='0' cellspacing='1' class='tablecolor'>
<tr class='banner'>
    <td height='55' align='center' ><strong>管理管理员</strong></td>
</tr>
</table>
<table width='770' border='0' align='center' cellpadding='3' cellspacing='1' class='tablecolor'>
<form name='form1' method='post' action='?action=saveedit'>
    <tr class='tablebody'>
      <td width='200' height='25' align='center' bgcolor='#8486B7' style='color:#ffffff; height:35'>管理员账号</td>
      <td bgcolor='#E3E3E3'><input name='adminname' type='text' id='adminname' value='' maxlength='20'></td>
    </tr>
    <tr class='tablebody'>
      <td height='25' align='center' bgcolor='#8486B7' style='color:#ffffff; height:35'>管理员密码</td>
      <td bgcolor='#E3E3E3'><input name='adminpwd' type='password' value='' maxlength='20'>
&nbsp;至少5位</td>
    </tr>
    <tbody id='tr1' style='display:block;'>
      <tr class='tablebody'>
        <td height='25' align='center' bgcolor='#8486B7' style='color:#ffffff; height:35'>管理员权限</td>
        <td bgcolor='#E3E3E3'><input name='G0' type='checkbox' value=1>
&nbsp;常规设置&nbsp;
          <input name='G1' type='checkbox' value=1>
&nbsp;企业信息设置&nbsp;
          <input name='G2' type='checkbox' value=1>
&nbsp;新闻与公告设置&nbsp;&nbsp;&nbsp;
          <input name='G3' type='checkbox' value=1>
&nbsp;产品与服务设置&nbsp;
<br>
          <input name='G5' type='checkbox' value=1>
&nbsp;附加信息设置&nbsp;&nbsp;
          <input name='G6' type='checkbox' value=1>
&nbsp;国际原油价格设置&nbsp;
          <input name='G7' type='checkbox' value=1>
&nbsp;成品油价格设置&nbsp;
          <input name='G8' type='checkbox' value=1>
&nbsp;首页动画设置&nbsp;</td>
      </tr>
    </tbody>
    <tbody id='tr2' style='display:block;'>
      <tr class='tablebody'>
        <td height='25' align='center' bgcolor='#8486B7' style='color:#ffffff; height:35'>产品与服务类别</td>
        <td bgcolor='#E3E3E3'><input name='H0' type='checkbox' value=15>
&nbsp;产品&nbsp;
          <input name='H1' type='checkbox' value=16>
&nbsp;加油站安全常识&nbsp;
          <input name='H2' type='checkbox' value=17>
&nbsp;服务&nbsp;
          <input name='H3' type='checkbox' value=19>
&nbsp;商业客户中心&nbsp;
          <input name='H4' type='checkbox' value=20>
&nbsp;仓储中心&nbsp;</td>
      </tr>
    </tbody>
    <tr class='tablebody'>
      <td height='25' align='center' bgcolor='#8486B7' style='color:#ffffff; height:35'>超级管理员选项</td>
      <td bgcolor='#E3E3E3'><input name='IsSuper' type='checkbox' value=1 onClick='javascript:fnTr();'>
&nbsp;<font color=red>超级管理员</font></td>
    </tr>
    <tr class='tablebody'>
      <td height='45' align='center' >&nbsp;</td>
      <td><input type='hidden' name='id' value=''>
        <input type='submit' name='Submit' value='提 交'>
&nbsp;
        <input type='reset' name='Submit2' value='重 置'></td>
    </tr>
</form>
</table>
<script language="javascript">
function fnTr(){
if (document.getElementsByName('IsSuper')[0].checked==true){
   document.getElementById('tr1').style.display = "none";
   document.getElementById('tr2').style.display = "none";
}else{
   document.getElementById('tr1').style.display = "block";
   document.getElementById('tr2').style.display = "block";
}
}
fnTr();
</script>

</body>
</html>


 

分享到:
评论

相关推荐

    隐藏layui数据表格表头的checkbox复选框

    ### 隐藏LayUI数据表格表头的Checkbox复选框方法详解 #### 背景介绍 在前端开发过程中,经常会使用到LayUI框架搭建网页应用,尤其是在设计复杂的数据展示界面时,LayUI提供了强大的数据表格功能。然而,在某些场景...

    Checkbox(打勾显示输入的密码)

    通常,密码输入框是用`&lt;input type="password"&gt;`实现的,其特点是输入内容会以星号或圆点的形式显示,隐藏实际字符。但是,当Checkbox被选中时,我们可以让这些字符变为可见。以下是一个简单的JavaScript实现: ```...

    CheckBox是否选中

    如果多个CheckBox关联并触发同一事件,通常需要使用数组或集合来跟踪选中的项。例如,你可以创建一个数组,每当CheckBox状态变化时,将其ID或值添加到或从数组中移除。这样,可以知道哪些CheckBox被选中,进而执行...

    javascript实现checkbox多级选择

    在JavaScript编程中,实现Checkbox的...总的来说,JavaScript实现Checkbox的多级选择是一个涉及到DOM操作、事件处理、可能还有数据结构和算法的综合问题。理解并掌握这一技能,对于开发复杂的前端应用是非常重要的。

    layui table中的列为checkbox 使layui中table表格中的列单元格显示为单选框checkbox

    // obj.type 是触发类型,'all'或'one' // 取消其他已选中的复选框 table.eachData('testReload', function(i, item){ if(item.id !== obj.data.id && item.checkStatus){ table.checkStatus('testReload')....

    简约时尚CSS样式,checkbox 全选或取消全选、或得到选中个数全案例使用详解

    2. JavaScript事件监听:使用`addEventListener`监听`change`事件,当全选`checkbox`被勾选或取消时触发相应的操作。 3. 全选逻辑:在事件处理函数中,遍历所有关联的`checkbox`,利用`checked`属性设置或清除它们的...

    checkbox多项选中及取消选中

    综上所述,实现 `checkbox` 的多项选中及取消选中,需要理解 `checkbox` 的基本用法,掌握JavaScript操作DOM属性的方法,理解 `attr` 与 `prop` 的区别,并灵活运用事件监听和样式控制。通过这些技术,你可以创建出...

    Asp.net CheckBoxList操作集合

    在ASP.NET Web Forms开发中,CheckBoxList控件是一种常用的选择组件,它允许用户从一系列选项中选择一个或多个项目。本篇文章将详细讲解如何进行CheckBoxList的操作,包括获取选中项、实现全选、取消选中以及反选...

    checkbox实现全选和反选经典例子

    这可以通过再次触发全选Checkbox的`CheckedChanged`事件,但这次改变所有行Checkbox的状态为未选中。 4. **事件处理和逻辑** 在代码-behind文件中(例如.CS文件),我们需要定义`CheckedChanged`事件的处理函数。...

    checkbox:click事件触发span元素内容改变的方法

    Checkbox 点击事件触发 Span 元素内容改变的方法 Checkbox 点击事件触发 Span 元素内容改变的方法是一种常见的交互方式,在网页开发中非常常用。今天,我们将为大家带来一个使用 Checkbox 点击事件触发 Span 元素...

    checkbox全选功能实例

    2. **JavaScript交互**:通过JavaScript监听主`checkbox`的`change`事件。当该事件触发时,遍历所有子`checkbox`,并根据主`checkbox`的状态来改变它们的`checked`属性。 ```javascript document.getElementById('...

    CheckBox的优化.rar

    同时,JavaScript还可以监听Checkbox的状态变化,触发相应的事件处理函数,如更新页面的其他部分,或者发送数据到服务器。 总结来说,“CheckBox的优化.rar”项目提供了如何使用前端技术优化Checkbox的实例。它不仅...

    checkbox tree 带checkbox的树

    开发者可以利用各种前端框架或库(如React、Vue、Angular等)实现Checkbox Tree,例如在JavaScript中,有一些专门的库,如`dtree`(可能对应压缩包中的文件),提供了便捷的API和丰富的定制选项,帮助开发者快速构建...

    checkbox的数组传值

    本文将深入探讨如何在Struts框架下处理checkbox的数组传值,以及如何利用JavaScript增强用户体验。 ### Struts框架中的Checkbox处理 #### 1. **Struts标签库** Struts是Java Web应用开发的一个流行框架,提供了...

    多选下拉的CheckBoxList

    `toggleButton`是触发下拉显示的按钮ID,`slideToggle`函数提供了平滑的展开和折叠动画。 6. **处理用户选择** 在服务器端,可以使用`CheckBoxList`的`Items`集合来访问用户的选定项。例如,获取所有选中项的值:...

    自定义checkbox与button操作

    Checkbox是一种允许用户选择或取消选择一个或多个选项的交互控件。它的状态有两种:选中(checked)和未选中(unchecked)。我们可以通过设置`checked`属性来默认选中一个checkbox。 其次,`&lt;button&gt;`元素是网页中...

    asp.net Dropdownlist结合CheckBoxList多选下拉框

    7. **JavaScript/jQuery交互**:由于ASP.NET服务器控件在客户端与服务器端交互时会自动生成复杂的ID,所以可能需要使用JavaScript或jQuery来处理客户端的事件和操作,例如在客户端隐藏和显示CheckBoxList。...

    JS判断单个checkbox是否被选中

    在这个例子中,`this`关键字在事件处理函数内部指代触发事件的元素,即我们的复选框。这样,每当用户更改复选框状态时,都会输出相应的消息。 在实际开发中,可能有多个复选框,这时我们可以使用类选择器或者数据...

    Flex动态生成checkbox组

    // 事件处理函数,当Checkbox状态改变时触发 function checkboxChanged(event:Event):void { var checkbox:CheckBox = event.target as CheckBox; trace("Checkbox with label '" + checkbox.label + "' is now " ...

    Jquery为单选框checkbox绑定单击click事件

    本文将详细解读如何使用Jquery为单选框checkbox绑定单击click事件,并在事件触发时执行相应的函数。 首先,我们需要了解HTML中单选框checkbox的定义。单选框是表单元素中的一个类型,它允许用户在一组选项中选择一...

Global site tag (gtag.js) - Google Analytics