JavaScript for Responsive Navbar using checkbox checked or not

Question

I need a Javascript while adds the class checkedNavbar when the checkbox is checked and to remove it when unchecked.

      <div class="hamburger">
        <input type="checkbox" id="check" onclick="EnableDisableNavbar"/>
        <label for="check" class="checkButton">
          <i class="fas fa-bars" style="font-size: 35px"></i>
        </label>
      </div>

I want to add a class while checked and remove it when unchecked. Here's my css:

    ul{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100vh;
        z-index: 0;
        right: 0;
        background-color: #e54136;
    }
    ul li{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin: 15px 0;
    }
    ul li a{
        font-size: 30px;
    }
    .checkedNavbar{
        right: 100%;
    }

`onclick="EnableDisableNavbar"` makes no sense, because that expression does nothing. Inline event handlers like `onclick` are [not recommended](https://stackoverflow.com/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](https://stackoverflow.com/a/43459991/4642212) way of registering events. Always [use `addEventListener`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_—_dont_use_these) instead. — Sebastian Simon, Dec 28 '20 at 08:53
Do you know about `:checked` pseudo class? https://developer.mozilla.org/en-US/docs/Web/CSS/:checked — rybo111, Dec 28 '20 at 08:54
Have you tried using [`:checked`](https://developer.mozilla.org/en-US/docs/Web/CSS/:checked) or the [“Checkbox Hack”](https://css-tricks.com/the-checkbox-hack/)? Other than that your question isn’t clear. Are you trying to check if a checkbox is checked or not? `:checked` does that. Classes can be updated with the [`classList` API](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). — Sebastian Simon, Dec 28 '20 at 08:56
you can use `input:checked` style for just CSS coding. if you can use javascript you need to detect the checkbox when it's has a checked attribute. — Ali Safari, Dec 28 '20 at 09:02

score 0 · Answer 1 · answered Dec 28 '20 at 09:23

Try like this:

function EnableDisableNavbar() {
  document.querySelector(".hamburger").classList.toggle("checkedNavbar");
}

ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  z-index: 0;
  right: 0;
  background-color: #e54136;
}

ul li {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 15px 0;
}

ul li a {
  font-size: 30px;
}

.checkedNavbar {
  right: 100%;
}

/* Below added for demo only */
.hamburger {
   background-color: yellow;
}

.checkedNavbar {
   background-color: purple;
}

<div class="hamburger">
  <input type="checkbox" id="check" onclick="EnableDisableNavbar()" />
  <label for="check" class="checkButton">
    <i class="fas fa-bars" style="font-size: 35px"></i>
  </label>
</div>

Checkbox onclick attribute changed to EnableDisableNavbar()
The JavaScript classList.toggle() method can be used to add/remove the checkedNavbar class each time the checkbox is clicked.

An approach like this, which toggles a class, may be needed where the styling of the parent element of the checkbox changes, because in CSS that cannot be accessed using input:checked.

JavaScript for Responsive Navbar using checkbox checked or not

1 Answers1