Question

如何修改此代码。我可以在那里使用一个evenlistner来实现相同的结果。在这种情况下，最佳做法是什么。我可以在这里使用数据属性或querySelector更好。 codepen

＆＃13;

     const myCheck = document.getElementById("check");
     const myCheck2 = document.getElementById("check2");
     const dib = document.getElementById("dib");
     function change() {
     if (myCheck2.checked) {
      myCheck.checked = false;
      dib.style.display = "block";
     }
     else{
      dib.style.display = "none";
      myCheck.checked = true;
     }
    }
    function func2() {
     if (this.checked) {
      myCheck2.checked = false;
      dib.style.display = "none";
    }
     else {
      dib.style.display = "block";
      myCheck2.checked = true;
     }
    }

    myCheck2.addEventListener('click', change);
    myCheck.addEventListener('click', func2);

＆＃13;

     <input type="checkbox" id="check" >
     <input type="checkbox" id="check2" checked="checked" >
     <div id="dib">Text</div>

＆＃13;

Answer 1

您可以对现有代码进行两项改进，而无需更改逻辑，即为您的函数使用有意义的名称，并修复缩进。但无论如何......

如果我已经理解了您现有的代码，那么我们的想法是，当选中其中一个复选框时，应该自动取消选中另一个（在这种情况下为什么不使用单选按钮？），并且只有第二个才能显示相关的div选中复选框？如果是这样，您可以将代码组合成单个函数，如下所示：

const myCheck = document.getElementById("check");
const myCheck2 = document.getElementById("check2");
const dib = document.getElementById("dib");

function cbChanged() {
   (this === myCheck ? myCheck2 : myCheck).checked = !this.checked;
   
   dib.style.display = myCheck2.checked ? "block" : "none";
}

myCheck2.addEventListener('click', cbChanged);
myCheck.addEventListener('click', cbChanged);

<input type="checkbox" id="check" >
<input type="checkbox" id="check2" checked="checked">
<div id="dib">Text</div>

请注意，上面仍然绑定了两个事件侦听器，但绑定到同一个函数。

下面是一个更通用的版本，它在复选框及其相关的div周围使用一个容器，这样你就可以在页面上拥有多个副本，所有这些副本都由一个事件监听器处理，它与前一个版本的JS数量相似：

function cbChanged(e) {
  const showCB = this.querySelector(".show");
  const hideCB = this.querySelector(".hide");

  (e.target === hideCB ? showCB : hideCB).checked = !e.target.checked;
   
  this.querySelector("div").style.display = showCB.checked ? "block" : "none";
}

const containers = document.querySelectorAll(".container");
Array.prototype.forEach.call(containers, function(el) {
  el.addEventListener('click', cbChanged);
});

<div class="container">
  <input type="checkbox" class="hide" >
  <input type="checkbox" class="show" checked="checked">
  <div>Text One</div>
</div>

<div class="container">
  <input type="checkbox" class="hide" >
  <input type="checkbox" class="show" checked="checked">
  <div>Text Two</div>
</div>

<div class="container">
  <input type="checkbox" class="hide" >
  <input type="checkbox" class="show" checked="checked">
  <div>Text Three</div>
</div>

Checkbox onchange显示div并取消另一个复选框

1 个答案: