javascript - 使用纯 javascript 通过选中单选按钮取消选中复选框

Question

我正在学习纯 javascript，遇到问题需要您的帮助!

我要实现的目标:

我想创建一个复选框。当用户单击复选框时，我希望打开一个窗口。在新打开的窗口中会有多个单选按钮。如果用户单击其中一个单选按钮，窗口外的复选框将取消选中并且该框消失并显示

问题:

• 在代码中，反向不起作用。

• radio = check 到 checkbox = uncheck 之间的连接不起作用。

代码

let box = document.querySelector('.dd_box')

let ddCb = document.querySelector('#dd_cb')
let ddRb = document.querySelector('.dd_rb')

// play normal
ddCb.addEventListener('change', () => {
  box.classList.add('active')
})

// play in reverses
ddRb.addEventListener('click', () => {
  box.style.opacity = 0 // avoid showing the init style while switching the 'active' class

  box.classList.add('in-active')
  box.classList.remove('active')

  // force dom update
  setTimeout(() => {
    box.classList.add('active')
    box.style.opacity = ''
  }, 5)

  box.addEventListener('animationend', onanimationend)
})

function onanimationend() {
  box.classList.remove('active', 'in-active')
  box.removeEventListener('animationend', onanimationend)
}

body {
  background-color: rgba(30, 30, 30);
}

#dropdown {
  width: 500px;
  height: 300px;
  top: 50px;
  left: 100px;
  position: absolute;
}

#dropdown input[type=checkbox] {
  display: none;
}

.dd_bttn
/*clickable button*/

{
  width: 25px;
  height: 25px;
  top: 0px;
  left: -25px;
  position: absolute;
  z-index: 10;
  background-color: darkorange;
  cursor: pointer;
}

.dd_bttn:hover {
  background-color: purple;
}

.dd_box {
  width: 100%;
  height: 100%;
  top: 0px;
  left: 50%;
  position: absolute;
  transform: scale(0);
  background: grey;
}

@keyframes zzzib {
  0% {
    transform: translate(-50%) scale(0);
    background-color: red;
  }
  20% {
    transform: translateX(-50%) scale(0.9);
  }
  100% {
    transform: translateX(-50%) scale(1);
  }
}

.dd_box.active {
  animation: zzzib 1s forwards;
  animation-timing-function: ease-in-out;
}

.dd_box.in-active {
  animation-direction: reverse;
  animation-timing-function: ease-in-out;
}

<div id="dropdown">
  <input type="checkbox" id="dd_cb">
  <label id="dd_label" for="dd_cb">
          <div class="dd_bttn"></div>
        </label>
  <div class="dd_box">
    <input type="radio" class="dd_rb" name="rb">
    <input type="radio" class="dd_rb" name="rb">
    <input type="radio" class="dd_rb" name="rb">
  </div>
</div>

Answer 1

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    let box = document.querySelector('.dd_box')

    let ddCb = document.querySelector('#dd_cb')
   
    var inputs = document.querySelectorAll("input[type=radio]"),
  x = inputs.length;
while (x--)
  inputs[x].addEventListener("change", function() {

    alert('click');
    box.style.opacity = 0 // avoid showing the init style while switching the 'active' class

    box.classList.add('in-active')
    box.classList.remove('active')

    // force dom update
    setTimeout(() => {
      box.classList.add('active')
      box.style.opacity = ''
    }, 5)

    box.addEventListener('animationend', onanimationend)
  }, 0);
    // 
    ddCb.addEventListener('change', () => {
      box.classList.add('active')
    })


    function onanimationend() {
      box.classList.remove('active', 'in-active')
      box.removeEventListener('animationend', onanimationend)
    }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
      background-color: rgba(30, 30, 30);
    }

    #dropdown {
      width: 500px;
      height: 300px;
      top: 50px;
      left: 100px;
      position: absolute;
    }

    #dropdown input[type=checkbox] {
      display: none;
    }

    .dd_bttn
    /*clickable button*/

    {
      width: 25px;
      height: 25px;
      top: 0px;
      left: -25px;
      position: absolute;
      z-index: 10;
      background-color: darkorange;
      cursor: pointer;
    }

    .dd_bttn:hover {
      background-color: purple;
    }

    .dd_box {
      width: 100%;
      height: 100%;
      top: 0px;
      left: 50%;
      position: absolute;
      transform: scale(0);
      background: grey;
    }

    @keyframes zzzib {
      0% {
        transform: translate(-50%) scale(0);
        background-color: red;
      }
      20% {
        transform: translateX(-50%) scale(0.9);
      }
      100% {
        transform: translateX(-50%) scale(1);
      }
    }

    .dd_box.active {
      animation: zzzib 1s forwards;
      animation-timing-function: ease-in-out;
    }

    .dd_box.in-active {
      animation-direction: reverse;
      animation-timing-function: ease-in-out;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div id="dropdown">
      <input type="checkbox" id="dd_cb">
      <label id="dd_label" for="dd_cb">
              <div class="dd_bttn"></div>
            </label>
      <div class="dd_box">
        <input type="radio" class="dd_rb" name="rb">
        <input type="radio" class="dd_rb" name="rb">
        <input type="radio" class="dd_rb" name="rb">
      </div>
    </div></code></pre>
</div>
</div>






<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>    let box = document.querySelector('.dd_box')

    let ddCb = document.querySelector('#dd_cb')
    let ddRb = document.querySelector('.dd_rb')
var inputs = document.querySelectorAll("input[type=radio]"),
  x = inputs.length;
while (x--)
  inputs[x].addEventListener("change", function() {

    alert('click');
    box.style.opacity = 0 // avoid showing the init style while switching the 'active' class

    box.classList.add('in-active')
    box.classList.remove('active')

    // force dom update
    setTimeout(() => {
      box.classList.add('active')
      box.style.opacity = ''
    }, 5)

    box.addEventListener('animationend', onanimationend)
  }, 0);

    // play normal
    ddCb.addEventListener('change', () => {
      box.classList.add('active')
    })

    // play in reverses
    ddRb.addEventListener('click', () => {
      box.style.opacity = 0 // avoid showing the init style while switching the 'active' class

      box.classList.add('in-active')
      box.classList.remove('active')

      // force dom update
      setTimeout(() => {
        box.classList.add('active')
        box.style.opacity = ''
      }, 5)

      box.addEventListener('animationend', onanimationend)
    })

    function onanimationend() {
      box.classList.remove('active', 'in-active')
      box.removeEventListener('animationend', onanimationend)
    }</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>    body {
      background-color: rgba(30, 30, 30);
    }

    #dropdown {
      width: 500px;
      height: 300px;
      top: 50px;
      left: 100px;
      position: absolute;
    }

    #dropdown input[type=checkbox] {
      display: none;
    }

    .dd_bttn
    /*clickable button*/

    {
      width: 25px;
      height: 25px;
      top: 0px;
      left: -25px;
      position: absolute;
      z-index: 10;
      background-color: darkorange;
      cursor: pointer;
    }

    .dd_bttn:hover {
      background-color: purple;
    }

    .dd_box {
      width: 100%;
      height: 100%;
      top: 0px;
      left: 50%;
      position: absolute;
      transform: scale(0);
      background: grey;
    }

    @keyframes zzzib {
      0% {
        transform: translate(-50%) scale(0);
        background-color: red;
      }
      20% {
        transform: translateX(-50%) scale(0.9);
      }
      100% {
        transform: translateX(-50%) scale(1);
      }
    }

    .dd_box.active {
      animation: zzzib 1s forwards;
      animation-timing-function: ease-in-out;
    }

    .dd_box.in-active {
      animation-direction: reverse;
      animation-timing-function: ease-in-out;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <div id="dropdown">
      <input type="checkbox" id="dd_cb">
      <label id="dd_label" for="dd_cb">
              <div class="dd_bttn"></div>
            </label>
      <div class="dd_box">
        <input type="radio" class="dd_rb" name="rb">
        <input type="radio" class="dd_rb" name="rb">
        <input type="radio" class="dd_rb" name="rb">
      </div>
    </div></code></pre>
</div>
</div>