checkbox控制显示隐藏
显示文本框
<input type = "checkbox" id="checkbox" onclick="on_hide();"/><input type = "text" id="hide" style="display:none;"/>
<script>
function on_hide(){
document.getElementById("hide").style.display = (document.getElementById("checkbox").checked == true) ? "block" : "none";
}
</script>
点击显示说明文字即可选择/取消勾选状态
web开发中,由于checkbox比较小用户操作起来不是很方便,为了方便用户对checkbox操作我们可以让用户点击说明文字时即可实现 选择/勾选 checkbox
下面使用一种简单的方法实现
代码实现如下:
<input id="ck1" type="checkbox" />
复制代码代码如下:
<label for="ck1">点击我即可选择/取消勾选状态</label>
label:
说明文字标签必须为 label
for 指定需要联动checkbox的id
案例
<tr><td colspan="6"><input type = "checkbox" id="checkbox" onclick="on_hide();"/>是否申请实现担保物权</td></tr>
<tr >
<td colspan="6">
<script>
function on_hide(){
document.getElementById("hide").style.display = (document.getElementById("checkbox").checked == true) ? "block" : "none";
}
</script>
<label for="f_outer" id="hide" style="display:none;">
<table width="807" border="0">
<tr>
<td align="right" width="13%">审判法官</td>
<td width="22%"><input name="faguan" id="faguan" type="text" /></td>
<td width="9%" align="right">开庭时间</td>
<td colspan="3"><input onfocus="calendar()" type="text" class="time" id="kttime" name="kttime"/></td>
</tr>
<tr>
<td align="right">申请执行时间</td>
<td><input onfocus="calendar()" type="text" class="time" id="sqzhixingshijian" name="sqzhixingshijian"/></td>
<td align="right">执行案号</td>
<td width="22%"><input name="zhixinganhao" id="zhixinganhao" type="text" /></td>
<td width="11%" align="right">执行法官</td>
<td width="23%"><input type="text" name="zhixingfaguan" id="zhixingfaguan" /></td>
</tr>
</table>
</label>
</td>
</tr>
checkbox控制显示隐藏的更多相关文章
- vue实现部分页面导入底部 vue配置公用头部、底部,可控制显示隐藏
vue实现部分页面导入底部 vue配置公用头部.底部,可控制显示隐藏 在app.vue文件里引入公共的header 和 footer header 和 footer 默认显示,例如某个页面不需要显示h ...
- CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
曾经写显示隐藏老是用jq方法控制: dom.show(); dom.hide(); 事实上这样还是有非常多缺陷的. 这是html结构: <div class="holi"&g ...
- vue slot插槽v-show不控制显示隐藏
vue中想控制插槽的显示隐藏,用v-show是不起任何作用的,改用v-if 可以生效.
- 基于jquery封装通用的控制显示隐藏的方法
应用场景 在项目中会存在大量这样的需求: 1.选择不同的radio单选框,页面上的部分内容随之显示隐藏 2.选择不同的option下拉框内容,页面上的部分内容随之显示隐藏 如果每次遇到这类需求都单独写 ...
- js中按钮控制显示隐藏以及下拉功能
<script> function show() { var a2=document.getElementById("div2"); if(a2.style.displ ...
- 使用element-ui中table expand展开行控制显示隐藏
问题讲解:在使用vue版本的ElementUI中的table功能的时候还是遇到了一些问题,可以说饿了么团队在这个UI框架的文档撰写已经非常不错了,不过还是有一些方法乍一看让人摸不着头脑,有些table ...
- JS控制显示/隐藏二级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery里面控制显示和隐藏 ___土狗toggle
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(funct ...
- 一段显示隐藏列表HTML代码
一段显示隐藏列表HTML代码, 技巧在于把页面上的元素(“返回首页”)和控制显示/隐藏的元素(id=navs-menu)放在一个共同的div上,并在该div上绑定onmouseover和onmouse ...
随机推荐
- 在APP开发设计中,为什么APP开发公司要慎用左右横滑设计?
移动端屏幕越来越大,但用户对内容量的要求也水涨船高.如何在有限的屏幕内透出更多的内容,是设计师们研究的重点. 常用的内容拓展设计有:Y 方向 List 滑动.Z 方向 3D Touch .入口式内容折 ...
- Linux 搭建互信后,仍需要密码验证
修改ssh配置文件: vi /etc/ssh/sshd_config PermitRootLogin no 注释掉
- svn: E155017: Checksum mismatch while updating 校验错误的解决方法
[10.3.53.53:/EMRCV5]# svn up svn: E155004: Working copy '/EMRCV5' locked. svn: E155004: '/EMRCV5' is ...
- Ubuntu_18.04安装网易云音乐
首先到网易云音乐官网下载网易云音乐,ubuntu版的,安装. 这时候的图标打不开,缺少libcanberra sudo apt install libcanberra-gtk-module 安装完了配 ...
- C#RichTextBox复制并跳转指定行
方法一: rTxt.Focus(); //设置文本框中选定的文本起始点 为 指定行数第一个字符的索引 rTxt.SelectionStart = rTxt.GetFirstCharIndexFromL ...
- DML语句的使用(delete,update,insert)
8)DML语句的使用 在PL/SQL中,DML语句与前面学习的 相同. begin --执行插入操作 insert into t001(id) values(1); - ...
- java properties类读取配置文件
1.JAVA Properties类,在java.util包里,具体类是java.util.properties.Properties类继承自Hashtable类并且实现了Map接口,也是使用一种键值 ...
- C/C++拾遗(一):关于数组的指针和数组元素首地址的一道经典题
代码例如以下: #include <stdio.h> int main(void) { int a[5] = {1, 2, 3, 4, 5}; int *ptr = (int *)(&am ...
- IOS Sqlite用户界面增删改查案例
1.案例简单介绍 对SQLite操作进行了简单的封装,将对数据表操作转变成对对象的操作,并通过UI界面完毕对用户表的增.删.改.查,执行界面例如以下图所看到的 a 2.项目project文件夹 Use ...
- UI_UIImagePickerController(读取图片)
创建图片 #pragma mark - 创建 photoImageView - (void)createphotoImageView { self.photoImageView = [[UIImage ...