javascript - Hiding input doesnt work

Question

<input type="checkbox" name="AvatarfileSelected" value="image" 
       id="AvatarfileSelected" onclick="$('#extra').hide('slow')"/>
<span style="color:#538f05;">Change Image</span>
<div id="extra">
    <input type="file" name="avatarfile" id="avatarfile"></input>
</div>

The above code doesn't work. Could someone show me the mistakes?

Answer 1

你可能没有包括 jQuery ......

使用香草 javascript：

onclick="document.getElementById('extra').style.display = 'none'";

代替：

onclick="$('#extra').hide('slow')"

（或者如果你想使用它，可以包含 jQuery。）

---

顺便说一句，<input>没有结束标签：</input>

代替：

<input type="file" name="avatarfile" id="avatarfile"></input>

和：

<input type="file" name="avatarfile" id="avatarfile" />

Answer 2

onclick从 HTML 标记中取出事件并按unobutrusive方式进行。确保在文档就绪事件中绑定事件功能。

像这样使用它

$(function(){       
    $("#AvatarfileSelected").click(function(){    
       $("#extra").hide();        
    }); 
});​

Jsfiddle 示例：http: //jsfiddle.net/p9tdf/1/