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>

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>

• javascript
• jquery
• html

Share Improve this question Follow edited Nov 20, 2013 at 11:34 Srinivas asked Nov 20, 2013 at 11:03 SrinivasSrinivas 2,5391010 gold badges4848 silver badges7070 bronze badges 1

• There may be some issue. But the same code if I run on my local vs then it works fine. – SpiderCode Commented Nov 20, 2013 at 11:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

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();
        }
    });
});

There are multiple problems in the fiddle

1. Select No Wrap head/body in the second dropdown in the left panel - when onload is selected your script is added with in a window.onload = function(){//your code} wrapper making the function local to the wrapper function.

2. You need to include jQuery library in the page

3. Methods like show()/hide() are bound to jQuery wrapper object

   only Textbox

then

jQuery(function () {
    $('#c1').change(function () {
        $('#fileLabel, #fileBox').toggle(this.checked)
    }).change()
})

Demo: Fiddle

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>

In Left panel Framework and Extensions >> Second Drop down set No wrap - in

It will start working.