How to have two separate checkboxes in different divs, become checked and unchecked simultaneously?

Question

I've created two checkboxes that enable dark mode. I have one that is in the mobile navigation and one in the desktop navigation.

At 800px, the mobile checkbox becomes display:none and the desktop checkbox becomes display:block and vice versa before 800px.

If I begin on desktop, enable dark mode and go to mobile, the mobile checkbox is not checked and when I do check it, light mode works but the desktop checkbox is now referring to the opposite.

I am currently trying to take both checkboxes and mark them ':checked' when the input is clicked.

Is my issue, the fact that you cannot mark a checkbox checked when it is display:none and not currently in the DOM?

Codepen here.

$(document).ready(function() {

  $('input[type="checkbox"]').on('click', () => {

    $('body').toggleClass('darkMode');

    $('mobile-checkbox').is(':checked');
    $('desktop-checkbox').is(':checked');

  });

});

.darkMode {
  background-color: black;
}

.mobile {
  display: inline-block;
  box-shadow: 5px 5px 5px blue;
}

.desktop {
  display: none;
  box-shadow: 5px 5px 5px green;
}

@media (min-width:800px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: inline-block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="mobile">
    <input class="mobile-checkbox" type="checkbox">
  </div>

  <div class="desktop">
    <input class="desktop-checkbox" type="checkbox">
  </div>
</body>

`$('mobile-checkbox').is(':checked');` just returns true or false. `$('mobile-checkbox').prop('checked', true/false);` will change state. Also keep in mind your selectors there for mobile and desktop checkboxes are invalid. You're missing the `.` class denotation — Taplar, Feb 05 '20 at 18:00
Side note; if a selector is guarenteed to only return a single result, rather than using `is(':checked')` simply use `prop('checked')` to access the property rather than using a pseudo-selector to evaluate the element — Taplar, Feb 05 '20 at 18:03
Dude... Issue in code is style applied you cannot access the HTML element who has the style display:none ... You can use visibility:hidden to access the HTML element in Dom It will work — abhijeet abanave, Feb 05 '20 at 18:07
@abhijeetabanave what are you talking about? One element is visible. The visibility swaps if the media query applies. But one will be visible. Also, visibility doesn't change javascripts ability to find them in the dom. — Taplar, Feb 05 '20 at 18:07
@Taplar This works but now both checkboxes stay checked and removes the ability to uncheck them to go to light mode. — seandaniel, Feb 05 '20 at 18:15

score 1 · Accepted Answer · answered Feb 05 '20 at 18:17

You just need to set the prop checked to match the checked state of the one changed. I added a console log so you could see the change reflected. I also added a common class to both checkboxes to make selection easier.

$(document).ready(() => {
  let $body = $(document.body);
  let $viewSelectors = $('.view-selector').on('click', e => {
    $body.toggleClass('darkMode');
    $viewSelectors.prop('checked', e.target.checked);
    
    console.log($viewSelectors.map((index, it) => it.checked).get());
  });
});

.darkMode {
  background-color: black;
}

.mobile {
  display: inline-block;
  box-shadow: 5px 5px 5px blue;
}

.desktop {
  display: none;
  box-shadow: 5px 5px 5px green;
}

@media (min-width:800px) {
  .mobile {
    display: none;
  }
  .desktop {
    display: inline-block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mobile">
  <input class="mobile-checkbox view-selector" type="checkbox">
</div>

<div class="desktop">
  <input class="desktop-checkbox view-selector" type="checkbox">
</div>

score 1 · Answer 2 · answered Feb 05 '20 at 18:28

Code could look better, but here is a simple solution:

$( document ).ready(function() {
  var $checkboxes = $('input[type="checkbox"]');
    $checkboxes.on('change', function(){
      if(this.checked){
        $('body').addClass('darkMode');
        $checkboxes.prop('checked', true);
      }
      else{
        $('body').removeClass('darkMode');
        $checkboxes.prop('checked', false);
      }
    });
});

What it does:

on Change, check the value of the checked input, and apply the same value to all checkboxes.

Don't use arrow function here since we need this

How to have two separate checkboxes in different divs, become checked and unchecked simultaneously?

2 Answers2