Question

我正在尝试在点击相关复选框时显示 div，不使用使用任何jQuery。

我还想在取消选中复选框时隐藏div。

只有一个复选框非常简单，因为我设法做到了。

出于某种原因，我无法设法使其在多个复选框（及其相关的div）上工作。

我尝试了很多方法，但没有一种方法有效，所以我对问题的理解一定是错误的。

这是我的代码的简化版本。

HTML：

<div>
    <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay()"/>
    <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay()"/>
    <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay()"/>
    <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay()"/>
    <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay()"/>
    <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay()"/>
    <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay()"/>
</div>

<div>
    <div class="row" style="display:none;" id="lundi">Some content</div>
    <div class="row" style="display:none;" id="mardi">Some content</div>
    <div class="row" style="display:none;" id="mercredi">Some content</div>
    <div class="row" style="display:none;" id="jeudi">Some content</div>
    <div class="row" style="display:none;" id="vendredi">Some content</div>
    <div class="row" style="display:none;" id="samedi">Some content</div>
    <div class="row" style="display:none;" id="dimanche">Some content</div>
</div>

和我的JS：

function addDay() {

    let tabDays = [];
    let checked = document.querySelectorAll("input[type='checkbox']:checked");
    for (let i = 0; i < checked.length; i++) {
        tabDays.push(document.querySelector("#" + checked[i].value));
        tabDays.forEach(function (day) {
            if (tabDays.includes(document.querySelector("#" + checked[i].value))) {
                day.style.display = jour.style.display === "none" ? "block" : "none";
            }
        })

    }
}

非常感谢

Answer 1

您可以将元素传递到您的函数中，因为它的value对应于您要隐藏的元素的id /显示您不需要搜索任何东西。

＆＃13;

function addDay(e) {
  document.getElementById(e.value).style.display = e.checked ? "initial" : "none";
}

＆＃13;

<div>
  <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)" />
  <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)" />
  <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)" />
  <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)" />
  <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)" />
  <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)" />
  <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)" />
</div>

<div>
  <div class="row" style="display:none;" id="lundi">Some content</div>
  <div class="row" style="display:none;" id="mardi">Some content</div>
  <div class="row" style="display:none;" id="mercredi">Some content</div>
  <div class="row" style="display:none;" id="jeudi">Some content</div>
  <div class="row" style="display:none;" id="vendredi">Some content</div>
  <div class="row" style="display:none;" id="samedi">Some content</div>
  <div class="row" style="display:none;" id="dimanche">Some content</div>
</div>

＆＃13;

Answer 2

如果你想让它更干净并删除多个循环，那么删除onClick from复选框，只需听取它的click事件并基于该show hide元素

(function() {
 let checkBoxes = document.querySelectorAll("input[type='checkbox']");
 for (let i = 0; i < checkBoxes.length; i++) { 
        checkBoxes[i].addEventListener('click', function(e) {
      if (e.target.checked) {
        document.getElementById(e.target.value).style.display = 'block';
      } else {
        document.getElementById(e.target.value).style.display = 'none';
      }
    });
    }
})();

Answer 3

这也应该可以帮助你了解它的原理。

＆＃13;

function addDay(element) {
if(element.checked){
document.getElementById(element.value).style.display = "block";
} else {
document.getElementById(element.value).style.display = "none";
}
}

＆＃13;

<div>
    <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)"/>
</div>

<div>
    <div class="row" style="display:none;" id="lundi">Some content</div>
    <div class="row" style="display:none;" id="mardi">Some content</div>
    <div class="row" style="display:none;" id="mercredi">Some content</div>
    <div class="row" style="display:none;" id="jeudi">Some content</div>
    <div class="row" style="display:none;" id="vendredi">Some content</div>
    <div class="row" style="display:none;" id="samedi">Some content</div>
    <div class="row" style="display:none;" id="dimanche">Some content</div>
</div>

＆＃13;

我们可以使用：

传递html中的元素

onclick="addDay(this)"

现在我们可以访问javascript代码中的DOM元素，并可以使用它的属性。

element.checked  // returns true or false based on if the element is checked

element.value // returns the value which is determined by the value attribute

Answer 4

您没有将上下文传递到addDay函数中，从而做了很多额外的工作。

只需将this（引用onclick处理程序所注册的DOM元素）添加到checkbox元素参数即可。然后使用内置的DOM方法来更新样式。

<强> HTML

  <div>
    <input type="checkbox" value="lundi" id="lundiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="mardi" id="mardiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="mercredi" id="mercrediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="jeudi" id="jeudiCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="vendredi" id="vendrediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="samedi" id="samediCheck" onclick="addDay(this)"/>
    <input type="checkbox" value="dimanche" id="dimancheCheck" onclick="addDay(this)"/>
  </div>

  <div>
      <div class="row" id="lundi">Some content</div>
      <div class="row" id="mardi">Some content</div>
      <div class="row" id="mercredi">Some content</div>
      <div class="row" id="jeudi">Some content</div>
      <div class="row" id="vendredi">Some content</div>
      <div class="row" id="samedi">Some content</div>
      <div class="row" id="dimanche">Some content</div>
  </div>

<强> CSS

.row {
  display: none;
}

<强> JS

function addDay(checkbox) {
  var row = document.querySelector('#' + checkbox.value);
  if (!row) return;

  row.style.display = checkbox.checked ? 'block' : 'none';
}

在多个div上切换显示，在复选框上单击

4 个答案: