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>

I know you want to use pure javascript but don't be afraid to use Jquery. It's a very powerful library and it'll simplify all of your javascript. I can't persuade you enough. — A Friend
– A Friend, Commented Oct 24, 2018 at 22:34
As a foundation I want to learn pure js first. I saw a lot of jQuery user, who are good with it, but they don't have a idea, how to do it with pure js. From what I've seen, jQuery is like using a different language. But I havn't done anything yet — user10235329
– user10235329, Commented Oct 25, 2018 at 4:31
Yeah you're doing it right. I learnt pure JS first too. Just don't use it for full scale production because you'll waste a lot of time doing things that JQuery can do for you. JQuery is basically a file full of functions that run pure JS. So yeah it's a lot of new stuff to get used to but well worth learning at some point :) — A Friend
– A Friend, Commented Oct 25, 2018 at 5:51

lorbrito · Accepted Answer · 2018-10-25 13:22:22Z



    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>

Collectives™ on Stack Overflow

Uncheck a checkbox by checking a radio button, using pure javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related