应业务需要控制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>
 

Android实战简易教程<五十一>(ListView实现子控件的动态显示和隐藏、checkbox全选和反选)

动态控制checkbox的显示和全选反选功能,我研究了一下,发现实现也比较容易,特写下此篇文章。学习就是要有发散思维,要举一反三,大家也可以根据我的实例进行改编,添加和删除一些功能,这样可以提高你对知...
  • scholar_man
  • scholar_man
  • 2015年09月26日 11:20
  • 780

RadioButton和CheckBox的区别及使用场景

RadioButton       一组RadioButton,只能同时选中一个       单个RadioButton在选中后,通过点击无法变为未选中        RadioBu...
  • Android_1996
  • Android_1996
  • 2017年06月02日 22:29
  • 250

表示层调用控制层,控制层调用业务层,业务层调用数据访问层MVC

首先解释面上意思,service是业务层,dao是数据访问层。 呵呵,这个问题我曾经也有过,记得以前刚学编程的时候,都是在service里直接调用dao,service里面就new一个dao类对象,调...
  • SUNZHIJUN100
  • SUNZHIJUN100
  • 2015年04月19日 09:57
  • 3567

android中的CheckBox改变背景图片后图片显示大小不正确的问题

今天在工作中遇到一个需求:点击按钮后改变页面中相关显示并改变点击按钮的背景图片显示,最后决定用checkbox来实现,但是修改背景图片后发现图片的大小显示不正常,还是按钮图片原始尺寸来显示......
  • qingchen1016
  • qingchen1016
  • 2016年04月20日 11:44
  • 5027

Android-checkbox实现明文显示密码

.xml代码如下:
  • yayun0516
  • yayun0516
  • 2015年01月15日 10:07
  • 1517

我眼中的架构师:一个优秀的架构师应该具备什么?

时光退回到七八年以前,那个时候“架构师“还是一个很“高大上“的title。可是在今天的互联网圈,随便一个工作了三、五年的开发人员,都可以称之为架构师。随便多翻几个招聘网站,你可以看到:前端架构师、后端...
  • chunlongyu
  • chunlongyu
  • 2016年12月04日 20:11
  • 2608

TreeView的CheckBoxs的第三种状态,怎么点击node前的“+”的时候图标不变

目的:实现Treeview Checkbox的三种状态,分别是:选中、没有选中、部分选中。 效果如下图: 之前有人写了一部分实现Treeview Checkbox第三种状态的代码,...
  • candyvoice
  • candyvoice
  • 2016年06月29日 16:15
  • 915

Android实战简易教程-第五十一枪(ListView实现子控件的动态显示和隐藏、checkbox全选和反选)

前段时间写过一篇文章:Android实战简易教程-第四十七枪(ListView多选-实现点餐系统)有的同学留言建议,可不可以动态控制checkbox的显示和全选反选功能,我研究了一下,发现实现也比较容...
  • yayun0516
  • yayun0516
  • 2015年09月04日 09:50
  • 3306

一个项目中说系统分为表现层、控制层、逻辑层、DAO层和最终数据库五层架构-转

表现层就是看到的东西,比如你现在看到的当前页面 控制层就将你的请求从页面传到后台代码 逻辑层就是处理你的请求的代码 DAO层就是将数据存到数据库中的代码 数据库就是数据库了,存东西用的 ,DAO层就...
  • qq_33426311
  • qq_33426311
  • 2016年08月08日 11:46
  • 789

Listview中嵌套Checkbox的简单解决办法

最近公司都弥漫着快要解散的气氛。本渣渣也不开心了。想到换公司舍不得啊,我的小同事们!外加面试那种被各种问题轰炸的感觉也很是不爽。但是不开心又能怎样,当然还是学习去。最近项目中做了一个关于批量删除的这样...
  • CCstar1
  • CCstar1
  • 2016年02月29日 17:04
  • 1300
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:应业务需要控制checkbox的显示
举报原因:
原因补充:

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