當複選框被選中或未選中時執行操作

我在html中創建一個表單，表單的一個元素是複選框詢問用戶他是否有電話號碼，並且我試圖做出兩個操作： if該複選框被選中，我想要一個新的輸入元素出現在同一頁面，讓用戶輸入他的電話號碼。，如果用戶改變主意並嘗試取消選中該複選框，則刪除最後一個輸入，並在另一個輸入中顯示另一個信息。它與我一起工作時，複選框被選中，並且輸入似乎讓用戶輸入他的號碼。但如果用戶改變了主意或錯誤地檢查了這個複選框，並取消選中它，數字的輸入仍然在頁面中，我的意思是複選框中的未選中事件在檢查後無效！任何幫助，請...當複選框被選中或未選中時執行操作

<html> 
<head><script> 
function change(n){ 
if (n.checked) 
document.getElementById("message").innerHTML = "enter your number <input type="text" ...."; 
if (n.unchecked) 
document.getElementById("message").innerHTML = "age <input type="text" ...."; 
} 
</script> 
</head> 
<body><label><input type = "checkbox" onchange = "change(this)">Checkbox</label> 
<div id="message"></div> 
</body>

來源

2013-04-17 Anas Jah

你只需要在this.checked值if..else。因此，像這樣 -

document.querySelector('input[type="checkbox"]').addEventListener('change', function() { 
    if (this.checked) { 
     document.getElementById("message").innerHTML = 'enter your number <input type="text">'; 
    } 
    else { 
     document.getElementById("message").innerHTML = 'age <input type="text">'; 
    } 
}, false);

Working Demo

來源

2013-04-17 04:20:10 Rishabh

感謝，它的工作原理，我仍然不明白爲什麼兩（IF）不起作用。謝謝任何方式:) –

我不認爲'this.unchecked'是一個有效的屬性，它只是未定義。隨意標記答案爲'正確':) – Rishabh

當複選框被選中或未選中時執行操作

回答

相關問題