复选框点击后弹出输入框

html代码

<div class="row"><div class="col-sm-6"><div class="form-group"><label class="col-sm-3 control-label">OEM：</label><div class="col-sm-8"><input name="oem" id="oem" class="form-control" type="checkbox" onclick="energyTypeCheck(this);"></div></div></div><div class="col-sm-6"><div class="form-group" id="h1"><label class="col-sm-3 control-label">产能月最大产：</label><div class="col-sm-8"><input name="maxYield" id="maxYield" class="form-control" type="text"></div></div></div><div class="col-sm-6"><div class="form-group" id="h2"><label class="col-sm-3 control-label">产能月最小产：</label><div class="col-sm-8"><input name="minYield" id="minYield" class="form-control" type="text"></div></div></div></div>

js代码

//静态   单选框是否选中var oem = $('#oem').prop('checked');if(oem){ //选中  显示document.getElementById("h1").style.display = "block";document.getElementById("h2").style.display = "block";} else{  //未选中  隐藏document.getElementById("h1").style.display = "none";document.getElementById("h2").style.display = "none";}//动态点击打勾显示  不点击打勾隐藏function energyTypeCheck(chk) {if(chk.checked){ //显示document.getElementById("h1").style.display = "block";document.getElementById("h2").style.display = "block";}else{      //隐藏document.getElementById("h1").style.display = "none";document.getElementById("h2").style.display = "none";}}

效果没有点复选框前

效果点击复选框后

总结：主要使用id选择器配合js就可以达到效果

复选框点击后弹出输入框相关推荐

html 弹出复选框,js点击文本框弹出可选择的checkbox复选框
本文分享一段代码实例,它能够点击文本框的时候,能够弹出下拉的checkbox复选框,选中复选框就能够将值写入文本框中,可能在实际应用中的效果没有这么直白简单,不过可以作为一个例子演示,以便于学习者理解 ...
maya python 弹出窗口_maya python打印状态复选框？
我正在使用一个处于python状态的python.我想知道是否有人能帮我.当前,当用户点击Distribute按钮时,它将调用一个函数,该函数应打印"x"复选框的真/假状态.在im ...
复选框弹出确认框，点取消，仍会打钩或者把钩消掉
首先这个需求当时困扰了我两天!!这两天我尝试了各种事件不知道你们有没有遇见过这样的情况,就是需要你在复选框的基础上,要实现确认框,(目的:防止误点击,而勾选复选框) 我本身是后端开发,前端只是略懂 ...
bootstrap带有下拉按钮的输入框_关于bootstrap--表单（下拉select、输入框input、文本域textare复选框checkbox和单选按钮radio）...
html 里面的 role 本质上是增强语义性,当现有的HTML标签不能充分表达语义性的时候,就可以借助role来说明.通常这种情况出现在一些自定义的组件上,这样可增强组件的可访问性.可用性和可交互性 ...
关于控件的基本思考——输入框、复选框、开关
控件作为组织界面最基础的元素,相信大家都不会陌生,今天想谈谈这个不起眼的话题.文章从现实的控件过渡到软件界面,再用三大输入法的控件作为实际案例解说,全文干货满满,来收! 一.现实世界的控件 " ...
android点击按钮弹出输入框,android 弹出框(输入框和选择框)
1.输入框: final EditText inputServer = new EditText(this); inputServer.setFilters(new InputFilter[]{new ...
html表格中插入单行文本框,el-table复选框选中单行或多行点击按钮禁用el-table里面的input输入框该怎么判断？...
问题: 1.添加数据后下拉框中未显示带入的数据 2.不可以重复添加相同的数据 3.复选框选中单行或多行以后点击按钮禁用对于行的input 大神们帮忙看看怎么解决啊. Title v-model=&q ...
html手机单选框,手机移动网页制作：表单输入框、单选框、复选框
手机移动网页制作:表单输入框.单选框.复选框本文继前面讲到的WML语言中的文本标签和图像.链接后,接着讲WML语言中的表单内容. 在Html中,表单内容包括输入框.单选框.复选框等等,WML也并不例 ...
EasyUI：combotree(树形下拉框)复选框选中父节点(子节点的状态也全部选中)输入框中只显示父节点的文本值
在开发过程中遇到的小案例效果展示未处理之前的效果: 处理之后的效果: 需求详情 combotree(树形下拉框)复选框选中父节点时输入框只显示父节点的文本值,但是子节点的状态是选中的. 当所有子节 ...
微信小程序下拉框选项框组件—点击自定义输入，弹出输入框获取值实例
功能说明 ① 选择自定义输入 ② 弹出输入框进行输入 ③ 输入完后自动selected ④ 再点击下拉框值还在,也还可以自定义输入上代码 wxml代码 <view class="da ...

复选框点击后弹出输入框

复选框点击后弹出输入框

复选框点击后弹出输入框相关推荐

最新文章

热门文章