<input type="checkbox" name="checkname" onclick="check(this)"/>左
<input type="checkbox" name="checkname" onclick="check(this)"/>右 <div id="show" style="display:block;">显示</div>
<div id="hidden" style="display:none;">隐藏</div> <script type="text/javascript">
function check(obj){
var checks = document.getElementsByName("checkname");
if(obj.checked){
for(var i=0;i<checks.length;i++){
checks[i].checked = false;
}
obj.checked = true;
}else{
for(var i=0;i<checks.length;i++){
checks[i].checked = false;
}
}
document.getElementById('show').style.display = document.getElementById('show').style.display=="none"?"block":"none";
document.getElementById('hidden').style.display = document.getElementById('hidden').style.display=="none"?"block":"none";
}
</script>

用JS把复选框做成单选框,左显示div,右隐藏div的更多相关文章

  1. 【六】jquery之HTML代码/文本/值[下拉列表框、多选框、单选框的选中]

    val()方法不仅能设置元素的值,同时也能获取元素的值.另外,val()方法还有另外一个用处,就是它能使select(下拉列表框).checkbox(多选框)和radio(单选框)相应的选项被选中,在 ...

  2. Jquery学习笔记:操作form表单元素之二(复选框和单选框)

    在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...

  3. 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框

    视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  4. Bootstrap 表单和图片 (内联表单,表单合组,水平排列,复选框和单选框,下拉列表,校验状态,添加额外的图标,控制尺寸,图片)

    一.表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  5. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. 把复选框变成单选框(prop,attr的区别)

    如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...

  7. js实现复选框的全选、全不选和反选

    js实现复选框的全选.全不选和反选 主要是用遍历的方法查找元素,然后通过改变checked的属性来选择,为true则是选中状态,为false则是未选状态 实现代码 <!DOCTYPE html& ...

  8. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

  9. js input复选框选中父级同时子级也选中

    js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...

随机推荐

  1. Couldn't connect to Docker daemon at http+docker://localunixsocket - is it running?

    解决方法: 1.进入启动文件目录 2.将用户加入到docker 组 sudo gpasswd -a ${USER}  docker 3.使用root用户 sudo su 4. 切换当前用户 su ${ ...

  2. PHP设计模式(三)抽象工厂模式(Abstract Factory)

    一.什么是抽象工厂模式 抽象工厂模式的用意为:给客户端提供一个接口,可以创建多个产品族中的产品对象 ,而且使用抽象工厂模式还要满足以下条件: 系统中有多个产品族,而系统一次只可能消费其中一族产品. 同 ...

  3. OpenJDK源码研究笔记(二)-Comparable和Comparator2个接口的作用和区别(一道经典的Java笔试面试题)

    Comparable和Comparator是JDK中定义的2个比较接口,很相似,但又有所不同. 这2个接口的作用和区别也是Java中的常见经典面试题. 下面我们就来详细介绍下这2个接口的定义.作用.区 ...

  4. GenIcam标准(二)

    2     GenApi模块 – 配置相机 2.1. 简介 GenApi模块解决如何去配置相机的问题.主要的思路是,让相机生产厂商为他们的相机提供机器可以识别的产品说明.这些相机描述文件(camera ...

  5. Python中文字符问题

    Python中对中文字符的操作时常会使程序出现乱码 不全然管用的处理方法: 读取数据时使用encode编码为Bytes以保护数据 使用时转化为string并使用decode解码 如: title = ...

  6. 安卓安装提示:Android SDK requires Android Developer Toolkit version 21.1.0 or above. (错误解决方法)

    安卓安装提示:Android SDK requires Android Developer Toolkit version 21.1.0 or above.  (错误解决方法) 主要是因为版本号不正确 ...

  7. Linux下安装Mysql(RPM安装)

    一.去官网下载本次安装须要的mysql版本号.我们须要安装的是5.1版本号的且centos系统是64位的.所下面载的是MySQL-community-5.1.73-1.rhel5.x86_64.rpm ...

  8. 经常使用传感器协议1:CJ/T-188 水表协议解析1

          本文以实例说明CJ/T-188水表协议的解析过程,下面数据未经特殊说明,均指十六进制. 数据发送:         FE FE FE FE 68 10 44 33 22 11 00 33 ...

  9. Adobe 2015 CC update (Windows/Mac OS) 独立升级包下载 Adobe Photoshop CC (Windows 32bit)

    Adobe CC 2015 Product Updates/Downloads for Windows ** = To access these updates, please first follo ...

  10. Android TabLayout添加自定义分割线并且可以修改分割线高度

    为TabLayout添加分割线,显示的效果如下(红框内部分): 分割线 首先添加个竖线xml名为layout_divider_vertical: LinearLayout linearLayout = ...