[英]Hide/show div with javascript
我只想在選中某個復選框時顯示表單字段文本框,而在取消選中該復選框時將其隱藏。 我已經獲得了使它在選中復選框時隱藏的代碼,但是在加載頁面之前會顯示文本框,直到選中該復選框為止,這與我要完成的操作相反。 我對javascript相當陌生,所以我確定這很基礎。 謝謝你的幫助。
HTML:
<input type="checkbox" onclick="ShowCCFields(this.value);" name="CAT_Custom_510969" id="CAT_Custom_510969_7" value="Other..." />
Other...
<div class="item" id="other">
<label for="CAT_Custom_510972">Other:</label><br />
<textarea onkeydown="if(this.value.length>=4000)this.value=this.value.substring(0,3999);" class="cat_listbox" rows="4" cols="10" id="CAT_Custom_510972" name="CAT_Custom_510972"></textarea>
</div>
JavaScript的:
// Hide or show textarea if the other checkbox field is checked
var voucher = document.getElementById("CAT_Custom_510969_7");
function ShowCCFields(val) {
if (!document.getElementById('other'))
return;
if (val == voucher.checked)
document.getElementById('other').style.display = 'inline';
else
document.getElementById('other').style.display = 'none';
}
就像在javascript中一樣,在HTML中將樣式設置為none。
<div class="item" id="other" style="display:none;">
為什么不將顯示設置為無? 您可以在CSS中執行此操作,也可以將其添加到
<div class="item" id="other" style="display: none;">
在要隱藏的控件中將“顯示”設置為“無”:
<div class="item" id="other" style="display: none;">
並且在您的js函數中:
document.getElementById('other').style.display = 'inline';
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.