<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. nginx index.html

    [root@web03 nginx]# ls -l|grep -v temptotal 36drwxr-xr-x 2 root root 4096 Jun 7 15:36 confdrwxr-xr-x ...

  2. vue单文件中引用路径的处理

    原文地址:vue单文件中引用路径的处理如有错误,欢迎指正! vue单文件的开发过程中,在单文件模版中可能会涉及到文件路径的处理,比如 <img>, style 中的 background ...

  3. 虚拟机VM安装Linux系统CentOS7

    第一步:安装一个VM虚拟机: 百度VM,使用普通下载,一路Next即可 如果需要输入序列号,可以网上随意找一个,目前是个人可以随意激活,但如果做商业用途的话,还是最好买一个序列号,我在网上搜到的:5A ...

  4. Python学习第一天-编写登陆接口

    编写登陆接口 输入用户名密码 认证成功后显示欢迎信息 输错三次后锁定 帐号文件user.txt内容如下: qaz 123qwe 12345qweqwr 12321424...... 锁文件user_l ...

  5. APK反编译去广告大揭秘

    APK反编译去广告 具体步骤: 1.下载 apktool 下载地址:https://code.google.com/p/android-apktool/downloads/list 2.通过apkto ...

  6. POJ 3254 Corn Fields 状态压缩DP (C++/Java)

    id=3254">http://poj.org/problem? id=3254 题目大意: 一个农民有n行m列的地方,每一个格子用1代表能够种草地,而0不能够.放牛仅仅能在有草地的. ...

  7. MAVEN自己主动部署到tomcat

    前面几篇文章maven生成的war包都是手动部署到tomcat,显然这样是非常麻烦的.那么这一篇文章就来介绍一个怎样使用maven高速自己主动的部署项目到tomcat容器中. 1.首先我们须要配置to ...

  8. List operations

    The + operator concatenates lists: Similarly, the * operator repeats a list a given number of items: ...

  9. Codeforces 667C Reberland Linguistics 记忆化搜索

    链接 Codeforces 667C Reberland Linguistics 题意 给你一个字符串,除去前5个字符串后,使剩下的串有长度为2或3的词根组成,相邻的词根不能重复.找到所有的词根 思路 ...

  10. 基于Struts2+MySQL的多表出差明细表单

    下载地址:http://download.csdn.net/detail/qq_33599520/9790629 项目结构: UserAction package com.mstf.action; i ...