Question

我正在构建一个检查应用程序，以使检查员在房屋中通过基于答案的上下文相关问题。使用复选框显示/隐藏div内容时，显示不一致的成功。

我已将问题简化为几行非常基本的代码，这些代码似乎无法解决。

<input type="checkbox" name="cbReplaceOrRepair_0" value="Replace" id="cbReplaceOrRepair_0" onclick="showReplaceRoof()">Replace
<div class="dvRoofReplace" id="dvReplaceRoof" style="display:none">"Replace" option is checked</div><br>
<input type="checkbox" name="cbReplaceOrRepair_1" value="Repair" id="cbReplaceOrRepair_1" onclick="showDvConfirmRepairability()">Repair
<div class="dvRoofRepair" id="dvConfirmRepairability" style="display:none">"Repair" option is checked</div>


<script type="text/javascript">
function showReplaceRoof() {
var dvReplaceRoof = document.getElementById("dvReplaceRoof");
dvReplaceRoof.style.display = cbReplaceOrRepair_0.checked ? "block" : "none";
}
function showDvConfirmRepairability() {
var dvRoofRepair = document.getElementById("dvRoofRepair");
dvRoofRepair.style.display = cbReplaceOrRepair_1.checked ? "block" : "none";
}  
</script>

我的示例显示了一个复选框，它可以显示/隐藏div，而另一个复选框则不起作用。谁能告诉我我在做什么错？

另外，这是我经过数年的查找问题后在此提出的第一个问题，以防万一我弄乱了任何发布协议，因此我会提前道歉。

https://codepen.io/stephenskrocki/pen/EGoYaB

Answer 1

您错误地访问了元素。

第二个隐藏元素的ID为id="dvConfirmRepairability。

使用var dvRoofRepair = document.getElementById("dvConfirmRepairability");

希望这会有所帮助！

Answer 2

由于只有一个通缉选项，因此我将使用单选按钮代替复选框：

HTML标记：

<style>label > span {display: none;} /* hide notes by default */</style>
<label for="replace">Replace
  <input type="radio" name="radio" id="replace" onchange="radio()" />
  <span class="note">"Replace" option is checked</span>
</label>
<label for="repair">Repair
  <input type="radio" name="radio" id="repair" onchange="radio()" />
  <span class="note">"Repair" option is checked</span>
</label>

javaScript：

<script>
function radio() {
  var myRadio = document.querySelectorAll('input[name="radio"]'); // get radio
  var myNotes = document.querySelectorAll('.note'); // get notes
  if (myRadio[0].checked === true) { // if the first radio checked
    myNotes[0].style.display = 'inline-block'; // show first note
    myNotes[1].style.display = 'none'; // hide the second
  }
  else { // if not do the apposite
    myNotes[0].style.display = 'none';
    myNotes[1].style.display = 'inline-block';
  }
}
</script>

希望它对您有帮助！

“显示/隐藏”复选框不能始终有效

2 个答案: