应业务需要控制checkbox的显示

翻译 2016年05月30日 18:05:07

需求:当选中“博士”选项的时候,兴趣爱好才要显示出来!


<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
   <link href="css3/bootstrap.min.css" rel="stylesheet">
   <script src="jquery-1.12.2.min.js"></script>
  <script src="bootstrap.min.js"></script>
<script type="text/javascript">
$(function() {
$("input[type=radio]").click(function() {
if($(this).val() === 'option3') {
$("#hobby").css("display","block");
}
else {
$("#hobby").css("display","none");
$("input[type=checkbox]").prop("checked",false);
}
});
}); 

</script>
 </head>
 <body style="padding:50px;background-color:#ccc;">
<div class="container" style="padding:50px;background-color:#fff;">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-2 control-label">学历:</label>
<div class="col-md-10">
<label class="radio-inline control-label">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 中学
</label>
<label class="radio-inline control-label">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 大学
</label>
<label class="radio-inline control-label">
 <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 博士
</label>
</div>
</div>
<div class="form-group" style="display: none;"id="hobby">
<label class="col-md-2 control-label">兴趣爱好:</label>
<div class="col-md-10">
<label class="checkbox-inline"><input id="checkbox1" type="checkbox" value="coding">编码</label>
<label class="checkbox-inline"><input id="checkbox2" type="checkbox" value="pingpong">乒乓</label>
<label class="checkbox-inline"><input id="checkbox3" type="checkbox" value="danger">冒险</label>
<label class="checkbox-inline"><input id="checkbox4" type="checkbox" value="sleep">睡觉</label>
<label class="checkbox-inline"><input id="checkbox5" type="checkbox" value="book">看书</label>
</div>
</div>
<div class="col-md-offset-2">
<button class="btn btn-success active" type="button">提交表单</button>
</div>
</form>
</div>
 </body>
</html>
 

举报

相关文章推荐

应业务需要控制checkbox的显示

需求:当选中“博士”选项的时候,兴趣爱好才要显示出来!             Bootstrap基础入门               ...

Console 显示控制台

控制台

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

ExtJS4 自动生成控制grid的列显示、隐藏的checkbox

由于某种原因,需要做一个控制grid列显示的checkboxgroup,

【Excel实用操作灵活技术九则】

本人使用Excel已经有一段时间,Excel实用操作灵活技术九则,现介绍一部分如下:   1、快速输入大写中文数字   将光标移至需要xp系统下载输入大写数字的单元格中。利用数字软件应用...

字符显示的控制

第六次实验可以算是很简单的一次了,只要知道了0.11如何响应你的键盘事件,一切问题都迎刃而解了。实现这个实验的方法有很多,我的也是仅供参考,其他方法可能还有些是涉及到修改汇编代码的。 首先,要做的就...

字符显示的控制

一 源代码/* linux-0.11/include/asm/system.h 添加f12_on标志 */int f12_on;//定义f12_on表示是否按下f12(每按两次抵消)/...

No 25 · treeview 控件中显示checkbox

using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Secu...
  • JQuee
  • JQuee
  • 2011-07-16 12:30
  • 281

js控制li的隐藏和显示

(html页面)                              ...

WPF应用程序显示控制台

注意 WPF应用程序默认情况下是不会显示控制台的,有时候我们却有着样子的需求想要显示控制台,因此以下是一种解决方法: 首先 新建一个WPF应用程序,默认有个叫做MainWindow的xaml文件...

使用cout来进行格式化输出

1.修改显示时使用的计数系统ostream类是从ios类派生来的,而后者是从ios_base派生来的。ios_base类存储了描述格式状态的信息。例如,一个类成员中某些位决定了使用的计数系统,而另一个...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)