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

Question

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

我正在努力实现的目标：

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

问题：

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

• 无线电=选中复选框=取消选中之间的连接不起作用。

代码

 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

  
 
  
  
 
   
 
    
    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)
    }
 
    
    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>
 
   
 
  







  
 
  
  
 
   
 
    
    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)
    }
 
    
    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>