如果選中其中一個復選框（每個復選框上的名稱不同），如何顯示 div？

Question

如果選中兩個復選框之一，我將嘗試顯示 div。 我在一些文章中找到它但名稱相同，我為每個復選框使用不同的名稱將其存儲到 mysql。我當前的 javascript 代碼是

document.addEventListener('change', function(jj) {
  function jj() {
    if ((document.getElementById('jj1_ikk').checked) || (document.getElementById('jj2_ikk').checked)) {
      document.getElementById('jsa').style.display="block";
    } else {
      document.getElementById('jsa').style.display="none";
    }
  }
})

輸入字段是

<input type="checkbox" id="jj1_ikk" name="jj1_ikk" /><label for="jj1_ikk">A</label>
<input type="checkbox" id="jj2_ikk" name="jj2_ikk" /><label for="jj2_ikk">B</label>

其中 jj1_ikk 和 jj2_ikk 是復選框 ID，jsa 是我想要顯示/隱藏的 div。

我希望我的描述是清楚的，謝謝。

Answer 1

在為定義兩個嵌套函數的更改事件添加處理程序時，您犯了一個錯誤。 另外，我僅在加載文檔后才添加事件處理程序。 您可以測試此代碼段中的代碼：

 //when the document has been loaded, adds the event handlers to the checkboxes document.addEventListener("DOMContentLoaded", () => { document.addEventListener('change', () => addHandlers()); }); /** * Adds handler for the change event on both checkboxes */ function addHandlers(){ let jj1 = document.getElementById('jj1_ikk'); let jj2 = document.getElementById('jj2_ikk'); jj1.addEventListener('change', updateMsgVisibility); jj2.addEventListener('change', updateMsgVisibility); } /** * Show/Hide #jsa based on checkboxes status */ function updateMsgVisibility(){ let jj1 = document.getElementById('jj1_ikk'); let jj2 = document.getElementById('jj2_ikk'); if ( (jj1 && (jj1.checked)) || (jj2 && (jj2.checked)) ) { document.getElementById('jsa').style.display="block"; } else { document.getElementById('jsa').style.display="none"; } }

 <input type="checkbox" id="jj1_ikk" name="jj1_ikk" /><label for="jj1_ikk">A</label> <input type="checkbox" id="jj2_ikk" name="jj2_ikk" /><label for="jj2_ikk">B</label> <div id="jsa" style="display:none;">This is the element that will be shown if both checkboxes aren't checked</div>

Answer 2

您可以在跨度中放置兩個復選框並檢查更改 onclick 跨度這樣

HTML

<span onclick="CheckChanges()">
    <input type="checkbox" id="jj1_ikk" name="jj1_ikk" /><label for="jj1_ikk">A</label>
    <input type="checkbox" id="jj2_ikk" name="jj2_ikk" /><label for="jj2_ikk">B</label>
</span>

<div id="jsa">This is the element that will be shown if both checkboxes aren't checked</div>

JavaScript

var aCheckBox = document.getElementById("jj1_ikk")
var bCheckBox = document.getElementById("jj2_ikk")

function CheckChanges() {
    if (aCheckBox.checked == true || bCheckBox.checked == true) {
        document.getElementById("jsa").style.display = "block"
    } else {
        document.getElementById("jsa").style.display = "none"
    }
}