Javascript Hide/Unhide FileUpload on Checkbox Checked
For some reason my check box isnt controlling the fileupload field I have. Can anyone see what is going wrong with this? When I check the box it does nothing and i'm not getting any errors returned?
<script type="text/javascript">
function checkBox() {
var changeimage=document.forms["myform"]["changeimage"].checked
if (changeimage) {
document.forms["myform"]["picupload"].style.display='';
} else {
document.forms["myform"]["picupload"].style.display='none';
}
}
</script>
...
<input type="checkbox" name="chnageimage" id="changeimage" onclick"checkBox();" />
<label for="cha开发者_如何学JAVAngeimage"></label>
<br />
<label for="picupload"></label>
Picture
<input type="file" name="picupload" id="picupload" style="display: none;"/>
<br />
<img src="userpics/<?php echo $row['Photo'] ?>" /></p>
Its much better to do this.
Change your HTML checkbox like this. Pass this
object of the clicked HTMLElement
on the onclick
event
<input type="checkbox" name="chnageimage" id="changeimage" onclick="checkClick(this);" />
Now you can change your javascript like this.
function checkClick(objCheckBox) {
document.getElementById("picupload").style.display = objCheckBox.checked ? 'block' : 'none';
}
No valid value for .style.display
takes the value ''
. It should be block
in this example.
You have a typo at onclick"checkBox();"
should be onclick="checkBox();"
You used onclick"checkBox();" instead of onclick="checkBox();" and there is no form element in html.
<script type="text/javascript">
function checkBox() {
var changeimage=document.forms["myform"]["changeimage"].checked;
if (changeimage) {
document.forms["myform"]["picupload"].style.display='';
} else {
document.forms["myform"]["picupload"].style.display='none';
}
}
</script>
<form name="myform">
<input type="checkbox" name="chnageimage" id="changeimage" onclick="checkBox();" />
<label for="changeimage"></label>
<br />
<label for="picupload"></label>
Picture
<input type="file" name="picupload" id="picupload" style="display: ;"/>
<br />
</form>
精彩评论