<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. sort排序到底怎么排序

    sort()方法 sort() 方法在适当的位置对数组的元素进行排序,并返回数组. <!DOCTYPE html> <html> <head> <meta c ...

  2. Eclipse配置class文件输出目录

    1, Eclipse选中项目名称,邮件选中“Build Path”,然后选择“Configure Build Path”--->选择“Source” Tab---->修改"Def ...

  3. window下搭建Python3.7+selenium3.1.1+pycharm环境

    1.安装Python3.7 1.1  下载 Python并安装 Python3.5 (勾选上 Add Python3.7 to PATH) 点击 Install Now,安装完成后将python路径加 ...

  4. 洛谷 P1033 自由落体

    P1033 自由落体 题目描述 在高为 H 的天花板上有 n 个小球,体积不计,位置分别为 0,1,2,….n-1.在地面上有一个小车(长为 L,高为 K,距原点距离为 S1).已知小球下落距离计算公 ...

  5. 推断扫描后的内容是否是URL

    扫描的明明是Url.竟然当文本给处理了,看来正则没有通过. 扫描二维码后,我參考了QQ的效果.分了三种:网页地址.文件下载地址,文本信息:为了实现这样的效果.我 发现有非常多url非常奇葩.所以就想找 ...

  6. 【递推DP】POJ1163The Triangle

    题目链接:http://poj.org/problem?id=1163 事实上这个题目有非常多解法,可是我们能够看下这个用一位数组的高效动规解法,这个我上课时老师讲的,非常不错. 先保存最后一行4 5 ...

  7. IIS访问站点,出现connection refused

    排查后,发现是因为使用了代理导致的. 需要设置 Don't use the proxy server for local addresses.

  8. 如何在github的README.md中添加图片

    如何在github的README.md中添加图片 总结: 链接引用:![Image text](图片的链接地址) 简介: 1.在github上的仓库建立一个存放图片的文件夹,文件夹名字随意.如:img ...

  9. spark 针对决策树进行交叉验证

    from pyspark import SparkContext, SQLContext from pyspark.ml import Pipeline from pyspark.ml.classif ...

  10. zzulioj--1817--match number(水题)

    1817: match number Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 98  Solved: 45 SubmitStatusWeb Bo ...