復選框未選中 onclick JavaScript
[英]Checkbox not checked onclick JavaScript
問題描述
我正在嘗試在單擊復選框時添加一個輸入字段，並且我希望選中該復選框（這是它的默認行為！），但是即使在輸入字段出現后也沒有選中該復選框。 以下是我使用 JavaScript 的 HTML 代碼。
function check_test() { if (document.contains(document.getElementById("test_input"))) { document.getElementById("test_input").remove(); } document.getElementById("test_div").innerHTML += "<input type='text' name='test_input' id='test_input'/>"; }
<div id="test_div"> <input type="checkbox" name="test_checkbox" id="test_checkbox" onclick="check_test()" /> </div>
我也在 JsFiddle 中嘗試過這個，它給出了同樣的錯誤，我不確定我做錯了什么。
6 個解決方案
解決方案1
3 2020-01-03 19:49:36
您正在使用類似的 innerHTML 覆蓋復選框所在的同一 div 的內容。 使用第二個 div，或者使用 create element 和 append child 而不是替換整個內容。
這有效。
<html>
<div id="test_div1">
<input type="checkbox" name="test_checkbox" id="test_checkbox" onclick="check_test()"/>
</div>
<div id="test_div"></div>
<script>
function check_test() {
if(document.contains(document.getElementById("test_number"))) {
document.getElementById("test_number").remove();
}
document.getElementById("test_div").innerHTML += "<input type='number' name='test_number' id='test_number'/>";
}
</script>
</html>
解決方案2
2 2020-01-03 19:53:39
通過做 += 你覆蓋以前的復選框。
解決方案3
2 已采納 2020-01-03 20:15:00
如果#test_input存在於 DOM 中，則有條件地刪除它，但是在添加它時沒有使用else 。 因此，無論您處於哪種狀態，您都將始終以將輸入添加到 DOM 來結束函數。
正如其他人所提到的，當您在 innerHTML 上+=時，您實際上是在創建一個全新的字符串，從而將原始復選框重新初始化為未選中狀態。
您可能只想將一個新子項附加到包裝器中。 我還使用了onchange事件，這樣無論是通過單擊還是以編程方式選中該框，它都會執行您想要的操作。
function check_test(checkbox) { const checked = checkbox.checked; // is it checked? const testInput = document.getElementById("test_input"); // test_input element // if it's checked and doesn't have an input, add it if (checked && !testInput) { const newInput = document.createElement('input'); newInput.type = 'text'; newInput.name = 'test_input'; newInput.id = 'test_input'; checkbox.parentNode.appendChild(newInput); } // otherwise, if it's not checked and there is an input in the DOM, remove it else if (!checked && testInput) { document.getElementById("test_input").remove(); } }
<div id="test_div"> <input type="checkbox" name="test_checkbox" id="test_checkbox" onchange="check_test(event.target)" /> </div>
解決方案4
0 2020-01-03 19:49:53
你可以使用：
document.getElementById("test_div").insertAdjacentHTML("afterend", "<input type='text' name='test_input' id='test_input'/>");
代替：
document.getElementById("test_div").innerHTML += "<input type='text' name='test_input' id='test_input'/>";
不是最好的解決方案； 但是，它有效並且非常簡單。 然后您只需使用 CSS 樣式修復頁面的其余部分。
解決方案5
0 2020-01-03 19:51:53
嘗試在函數聲明中添加一個事件：
function check_test(e)
然后調用e.checked; 在函數的頂部或底部。
讓我知道這是否有效。 從我的手機接聽，所以我無法測試自己。
解決方案6
0 2020-01-03 20:22:25
當使用innerHTML 時，元素的所有事件都被取消。
您需要使用 DOM 函數。
<html>
<div id="test_div">
<input type="checkbox" name="test_checkbox" id="test_checkbox" onchange="check_test()" />
</div>
<script>
function check_test() {
var testdiv = document.getElementById("test_div");
if (!document.contains(document.getElementById("test_number"))) {
var newInput = document.createElement('input');
newInput.id = 'test_number';
testdiv.appendChild(newInput);
}else{
document.getElementById("test_number").remove();
}
}
</script>
</html>
復選框onclick事件加載，就像選中
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.