Uncheck a checkbox by checking a radio button, using pure 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.

Code

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>