Show Hide Table Row based on Check Box
Question
In this Fiddle I am trying to show/hide table row containing File input based on Check Box selection. But the showHide function is not getting called.
<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>
4 answers
solution1
3 ACCPTED 2013-11-20 11:07:16
From you code itself it is clear that you're missing jQuery library (in fiddle, I dont see the library included).
document.getElementById('fileLabel').show();
in jQuery you can simplify this as
$('#fileLabel').show();
.show()/.hide() are jQuery methods.
like
$(document).ready(function () {
$('#c1').on('change', function(){
if ($(this).prop('checked')) {
$('#filelabel').show();
$('#fileBox').show();
}
else {
$('#filelabel').hide();
$('#fileBox').hide();
}
});
});
solution2
2 2013-11-20 11:07:04
There are multiple problems in the fiddle
Select No Wrap head/body in the second dropdown in the left panel - when
onloadis selected your script is added with in awindow.onload = function(){//your code}wrapper making the function local to the wrapper function.You need to include jQuery library in the page
Methods like
show()/hide()are bound to jQuery wrapper objectonly Textbox
then
jQuery(function () {
$('#c1').change(function () {
$('#fileLabel, #fileBox').toggle(this.checked)
}).change()
})
Demo: Fiddle
solution3
0 2013-11-20 11:11:17
The function is work please write javascript in head section of html
<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>
solution4
0 2013-11-20 11:28:01
In Left panel Framework and Extensions >> Second Drop down set No wrap - in
It will start working.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.