Question

首先请忍受我是新手^^

我要列出一个复选框：

复选框1
复选框2
复选框3

如果选中了复选框1，则将显示block_1，依此类推，但是它仅适用于第一个块，如果我将block_2移到block_1上方，它将成为有效的那个，

If HttpContext.Current.User.Identity.IsAuthenticated Then
'run my code'
Else
'redirect to login'
End If

function show(id) {
  var checkBox = document.getElementById(id);
  var checkList = document.getElementById("block_" + id);
  if (checkBox.checked) {
    checkList.style.display = "block";
  } else {
    checkList.style.display = "none";
  }
}

谢谢：）

Answer 1

您的JS代码很好。真正的问题是您的HTML。关闭您的div标签。这会导致代码出现行为问题

<div id="block_1" style="display:none">
  <input type="checkbox"> experiment A <br>
  <input type="checkbox"> experiment B <br>
  <input type="checkbox"> experiment C <br>
</div>

<div id="block_2" style="display:none">
  <input type="checkbox"> experiment D <br>
  <input type="checkbox"> experiment E <br>
  <input type="checkbox"> experiment F <br>
</div>

<div id="block_3" style="display:none">
  <input type="checkbox"> experiment G <br>
  <input type="checkbox"> experiment H <br>
  <input type="checkbox"> experiment I <br>
</div>

Answer 2

有两个问题：

您的<div>块的每个结束标记都缺少/字符；将其添加为</div>
您的id属性不正确。根据{{3}}规范中的规定，它们必须至少包含一个字符。对于HTML5，它们大多以字符开头。为避免其他怪癖，请勿仅使用数字。

以下包括以下更改：

function show(id) {
  let checkBox = document.getElementById('check_' + id),
      checkList = document.getElementById('block_' + id);

  checkList.style.display = checkBox.checked ? 'block' : 'none';
}

<input type="checkbox" id="check_1" onclick="show(1)"> Concrete <br>
<input type="checkbox" id="check_2" onclick="show(2)"> Soil Mechanics <br>
<input type="checkbox" id="check_3" onclick="show(3)"> Hidraulics <br>
<hr>

<div id="block_1" style="display:none">
  <input type="checkbox"> experiment A <br>
  <input type="checkbox"> experiment B <br>
  <input type="checkbox"> experiment C <br>
</div>

<div id="block_2" style="display:none">
  <input type="checkbox"> experiment D <br>
  <input type="checkbox"> experiment E <br>
  <input type="checkbox"> experiment F <br>
</div>

<div id="block_3" style="display:none">
  <input type="checkbox"> experiment G <br>
  <input type="checkbox"> experiment H <br>
  <input type="checkbox"> experiment I <br>
</div>

Answer 3

关闭div标签存在问题

function show(id) {
  var checkBox = document.getElementById(id);
  var checkList = document.getElementById("block_" + id);
  if (checkBox.checked) {
    checkList.style.display = "block";
  } else {
    checkList.style.display = "none";
  }
}

<input type="checkbox" id="1" onclick="show(1)"> Concrete <br>
<input type="checkbox" id="2" onclick="show(2)"> Soil Mechanics <br>
<input type="checkbox" id="3" onclick="show(3)"> Hidraulics <br>
<hr>

<div id="block_1" style="display:none">
  <input type="checkbox"> experiment A <br>
  <input type="checkbox"> experiment B <br>
  <input type="checkbox"> experiment C <br>
</div>

<div id="block_2" style="display:none">
  <input type="checkbox"> experiment D <br>
  <input type="checkbox"> experiment E <br>
  <input type="checkbox"> experiment F <br>
</div>

<div id="block_3" style="display:none">
  <input type="checkbox"> experiment G <br>
  <input type="checkbox"> experiment H <br>
  <input type="checkbox"> experiment I <br>
</div>

Javascript仅适用于第一个块？

3 个答案: