Javascript在复选框上隐藏/取消隐藏FileUpload已选中

时间:2011-08-14 17:04:34

标签: javascript html checkbox

出于某种原因,我的复选框不能控制我的fileupload字段。任何人都可以看到这有什么问题吗?当我选中该框时它什么也没做,我没有收到任何错误?

<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="changeimage"></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>

3 个答案:

答案 0 :(得分:2)

这样做要好得多。

像这样更改您的HTML复选框。通过this事件

上点击的HTMLElement的{​​{1}}个对象
onclick

现在你可以改变这样的javascript。

<input type="checkbox" name="chnageimage" id="changeimage" onclick="checkClick(this);" />

function checkClick(objCheckBox) { document.getElementById("picupload").style.display = objCheckBox.checked ? 'block' : 'none'; } 的有效值没有值.style.display。在这个例子中它应该是''

答案 1 :(得分:0)

onclick"checkBox();"的拼写错误应为onclick="checkBox();"

答案 2 :(得分:0)

你使用onclick“checkBox();”而不是onclick =“checkBox();”并且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>