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

Question

I'm learning pure javascript and need your help with a problem!

What I'm trying to achieve:

I want to create a checkbox. When the user clicks the checkbox I want a window to open. In the newly opened window will be multiple radio buttons. If the user clicks on one of those radio buttons, the checkbox outside of the window will uncheck and the box disappear with

Problems:

• In the code the reverse don't work.

• The connection between radio = check to checkbox = uncheck does not work.

 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>