显示基于复选框的隐藏表行
Show Hide Table Row based on Check Box
在这个Fiddle中,我试图显示/隐藏包含基于复选框选择的文件输入的表行。但是showHide函数没有被调用。
<div align="center" class="divBody">
<br />
<div id="controlHost">
<div id="outerPanel">
<table width="100%" cellpadding="2" cellspacing="5">
<tr align="left">
<td colspan="2">
<input type="checkbox" id="c1" onclick="showHide()">only Textbox</input>
</td>
</tr>
<tr align="left" id="fileLabel">
<td colspan="2">
<span class="message" >Select file</span>
</td>
</tr>
<tr align="left" id="fileBox">
<td valign="top" style="height:100%; width:70%;">
<input type="file" id="FileInput" multiple="false" class="fileInput" style="height:100%; width:100%;"/>
</td>
</tr>
<tr align="left">
<td colspan="2">
<span class="message" >Types</span>
</td>
</tr>
<tr>
<td>
<input type="text" id="txtTypes" tabindex="0" style="margin-left:1px;width:100%" maxlength="50" >
</td>
</tr>
<tr>
<td align="center">
<input type="button" id="upload" name="Upload" value="Update" onclick="startUpload('FileInput', 1048576, 'uploadProgress', 'statusMessage', 'upload', 'cancel');"
class="button" />
<input type="button" id="cancel" name="Cancel" value="Cancel" disabled="disabled"
onclick="cancelUpload();" class="button" />
</td>
</tr>
</table>
</div>
</div>
从您的代码本身来看,很明显您缺少jQuery库(实际上,我看不到包含该库)。
document.getElementById('fileLabel').show();
在jQuery中,您可以将其简化为
$('#fileLabel').show();
.show()/.hide()
是jQuery方法。
像
$(document).ready(function () {
$('#c1').on('change', function(){
if ($(this).prop('checked')) {
$('#filelabel').show();
$('#fileBox').show();
}
else {
$('#filelabel').hide();
$('#fileBox').hide();
}
});
});
fiddle 中存在多个问题
-
在左侧面板的第二个下拉列表中选择No Wrap head/body-当选择
onload
时,脚本将添加到window.onload = function(){//your code}
包装器中,使该函数成为包装器函数的本地函数。 -
您需要在页面中包含jQuery库
-
像
show()/hide()
这样的方法绑定到jQuery包装器对象仅文本框
然后
jQuery(function () {
$('#c1').change(function () {
$('#fileLabel, #fileBox').toggle(this.checked)
}).change()
})
演示:Fiddle
函数是工作的,请在html 的头部编写javascript
<head>
<script>
function showHide() {
alert('called');
var chbox = document.getElementById("c1");
var vis = "none";
for(var i=0;i<chboxs.length;i++) {
if(chbox.checked){
alert('checked');
document.getElementById('fileLabel').show();
document.getElementById('fileBox').show();
break;
}
else
{
alert('unchecked');
document.getElementById('fileLabel').hide();
document.getElementById('fileBox').hide();
break;
}
}
}
</script>
</head>
在左侧面板中框架和扩展>第二个下拉集无换行
它将开始工作。
相关文章:
- 显示隐藏复选框
- 在jsTree中隐藏复选框
- 如何从django表单库中隐藏复选框,并使用Javascript切换其显示属性
- 单击后隐藏复选框
- 当按下按钮时,隐藏复选框会出现(正确),但不会'再次按下时t消失
- 根据数组中的值显示/隐藏复选框
- 如何从网格视图中隐藏复选框
- 如何隐藏复选框文本
- JQuery隐藏复选框选中,但不取消选中
- 使用JavaScript隐藏复选框时,请取消选中该复选框
- 身体负荷时隐藏复选框
- Kendo UI ASP.NET MVC-网格-使用JavaScript隐藏复选框
- 在显示/隐藏复选框中添加动画
- 隐藏复选框,但保留它的存在
- 不发送隐藏复选框输入值:(
- 在隐藏复选框上添加更改事件
- 如何使用jQuery显示/隐藏复选框中选中/未选中状态的元素
- 获取隐藏复选框的值
- 当从下拉菜单中选择默认值时,隐藏复选框.[Angular js]
- Javascript不显示/隐藏复选框点击的选择框