`

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>


 

分享到:
评论

相关推荐

    javaScript常用事件

    常用javaScript事件归纳。 常用事件: 1.onclick 鼠标单击事件 通常在下列基本对象中产生: button(按钮对象) checkbox(复选框)或(检查列表框) radio (单选钮) reset buttons(重要按钮) submit ...

    JavaScript获取和设置CheckBox状态的简单方法

    介绍了JavaScript获取和设置CheckBox状态的简单方法,有需要的朋友可以参考一下

    Javascript实现CheckBox的全选与取消全选的代码

    本文介绍的方法,触发条件独立,可以全选或取消全选指定 name 的 CheckBox , 同一页面可以有多组供全选的 CheckBox ,功能健全,通用性较强。 效果图:运行查看效果: 字母全选开关 a b c d e f g 数字...

    深入理解javaScript中的事件驱动

    javascript中的事件驱动是通过 鼠标或热键 的动作引发的 主要事件如下:1、鼠标单击事件 onclick 如:( &lt;input type=”button” value=”鼠标单击” onclick=”执行语句.处理” /&gt;) 通常用于如下控件:...

    javascript 回车键触发表单提交的问题

    比如搜索行为,希望输入完关键词之后直接按回车键立即提交表单,而有些复杂表单,可能要避免回车键误操作在未完成表单填写的时候就触发了表单提交。 要控制这些行为,不需要借助JS,浏览器已经帮我们做了这些处理,...

    javascript checkbox/radio onchange不能兼容ie8处理办法

    javascript checkbox/radio onchange不能兼容ie8处理办法 在ie8下,checkbox的onchange没能实现触发自定义的函数,如何解决该问题,如下: function forIe(){ if($.browser.msie){ //判断浏览器是否为ie $(input...

    jQuery详细教程

    $(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 &lt;script type="text/javascript" src="/jquery/jquery.js"&gt; ...

    Silverlight2.0功能展示Demo源码

    BindingValidationError - 出现验证错误或解决上次验证错误则触发此事件 14、Silverlight(16) - 2.0数据之独立存储(Isolated Storage) 介绍 Silverlight 2.0 数据的独立存储(Isolated Storage): ...

    用户事件::dog:模拟用户事件以进行React测试库

    以与用户相同的方式触发事件 问题 从: [...]很明显,需要使用比fireEvent更高级别的抽象来表达网页上的用户操作 解决方案 user-event试图模拟与用户交互时在浏览器中发生的真实事件。 例如, userEvent.click...

    勾选时激活input 否则禁用的javascript代码

    唯一的可去之外是加了一点美化,使用户体验更加一层楼,其中包括边框的加粗,焦点的获取,checkbox边框线的隐藏等等。

    易切换状态:一个小型JavaScript库,可轻松在任何上下文中切换任何HTML元素的状态,并立即创建UI组件

    一个很小JavaScript库,可以轻松... 关键是……这些组件中的大多数暴露了循环行为:触发​​元素切换一个或多个目标元素的状态。 那么,为什么不一劳永逸地编码这种行为呢? 因此,这是一个解决方案:一个简单的脚本

    ExtAspNet_v2.3.2_dll

    -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack-&gt;AutoPostBack, Event PostBack-&gt;EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...

    cookie-consent:Cookie同意,带有可访问的对话框,不可知标记触发和条件内容,脚本和嵌入式挂钩

    Cookie同意JavaScript实用程序库没有依赖关系在checkbox或radio输入之间选择可自定义的Cookie类型(标识符,可选/必需,预先检查) 基于Cookie同意和类型的条件脚本代码,iframe和元素内置 :red_heart: 由。...

    ASP.NET常用代码

    &lt;script language="javascript" for="document" event="onkeydown"&gt; if(event.keyCode==13 && event.srcElement.type!='button' && event.srcElement.type!='submit' && event.srcElement.type!='reset' && event....

    ExtAspNet v2.2.1 (2009-4-1) 值得一看

    -修正CheckBox控件的CheckedChanged事件会被触发两次的BUG(Data PostBack-&gt;AutoPostBack, Event PostBack-&gt;EnablePostBack)。 -为TextBox,TextArea,DatePicker,NumberBox,TriggerBox等控件增加AutoPostBack属性...

    react.js CMS 删除功能的实现方法

    给每一行绑定一个checkbox,且在点击这个 checkbox 时,触发 action 中的一个方法(formatPostCollectionList),这个方法是用来更新选中的实体数组。formatPostCollectionList为action中的方法,需要export 定义每一...

    xy-ui:面向未来的原生Web组件UI组件库

    xy-checkbox , xy-raido键盘触发事件优化 特性 跨框架。无论是react , vue还是本机项目使用。 组件化。shadow shadow dom真正意义上实现了样式和功能的组件化。 类原生。一个组件就像使用一个div标签一样。 无...

    ExtJSWeb应用程序开发指南(第2版)

    2.5 ExtJS对原有JavaScript对象的扩展 2.5.1 Ext.Array 2.5.2 Ext.Date 2.5.3 Ext.Function 2.5.4 Ext.Number 2.5.5 Ext.String 2.5.6 Ext.Object 2.6 本章小结 第3章 ExtJS4.0的基本功能 3.1 ExtJS组件...

    jquery-1.1.3 效率提高800%

    设置为false可以防止触发像ajaxStart或ajaxStop这样的全局事件处理函数。这可以用于控制多个不同的Ajax事件。 ifModified(false) 数据类型: Boolean 只有响应自上次请求后被修改过才承认是成功的请求。是...

    treeGrid、树形表格

    单击数据行后触发该事件 id:行的id index:行的索引。 data:json格式的行数据对象。 */ function itemClickEvent(id, index, data){ window.location.href="ads"; } /* 通过指定的...

Global site tag (gtag.js) - Google Analytics