jQuery toggle switch checkbox - changing "checked" attribute delay

Question

I created a toggle switch checkbox and aplied the logic below:

1] If user clicks on toggle switch class="os_section-slider" the script will check if the input containing element's name is checked.

1-A] If the element is checked then change it to UNchecked and add that element into array named os_tagsToRemove

1-B] If the element is UNchecked then change it to checked and add that element into array named os_tagsToAdd

HTML

<span class="os_section-name">first</span>
<input type="checkbox" class="os_section-check" id="first" checked="checked">
<label class="os_section-slider" for="first"></label>

<div class="line-space-between"></div>

<span class="os_section-name">second</span>
<input type="checkbox" class="os_section-check" id="second">
<label class="os_section-slider" for="second"></label>

JS

$(".os_section-slider").click(function() {
    if($(this).prev().is(":checked")) {   //if checked
        $(this).prev().attr("checked", false);
        var os_tagName = $(this).prev().attr("id").toString();
        os_tagsToRemove.push(os_tagName);
        os_tagsToAdd.splice($.inArray(os_tagName, os_tagsToAdd),1);
    } else {    //if unchecked
        $(this).prev().attr("checked", true);
        var os_tagName = $(this).prev().attr("id").toString();
        os_tagsToAdd.push(os_tagName);
        os_tagsToRemove.splice($.inArray(os_tagName, os_tagsToRemove),1);
    }
});

My problem is, when my page reloads and my toggle switch appears in a modal box and I try to click on the switcher button I have to click 2 times until the checked attribute is added/removed.

The first click always only pushes the value into the array or removes it from the array but doesn't apply $(this).prev().attr("checked", true); nor $(this).prev().attr("checked", false);.

But after the second click on each switcher button, everything from that moment works fine.

Answer 1

Add this to load your add/remove arrays:

// Onload remove array fill
$("[type='checkbox']").each(function(){
  if( $(this).is(":checked") ){
    os_tagsToRemove.push($(this).attr("id"));
  }else{
    os_tagsToAdd.push($(this).attr("id"));
  }
});

Then, your logic was all reversed.

First, when you click on the label, which is defined as for="anID", the checked state of the coresponding checkbox already changes. You do not have to script that.

Then, when you look if it is checked, you have to know that this verification is made AFTER the checkbox state has changed. So I reversed your if conditions.

var os_tagsToAdd = [];
var os_tagsToRemove = [];

$(".os_section-slider").click(function() {
  console.clear();

  var os_tagName = $(this).prev().attr("id");

  //if checked AFTER the click
  if($(this).prev().is(":checked")) {
    if($.inArray(os_tagName, os_tagsToAdd) == -1){
      os_tagsToAdd.push(os_tagName);
    }
    os_tagsToRemove.splice($.inArray(os_tagName, os_tagsToRemove),1);

    //if unchecked AFTER the click
  } else {
    if($.inArray(os_tagName, os_tagsToRemove) == -1){
      os_tagsToRemove.push(os_tagName);
    }
    os_tagsToAdd.splice($.inArray(os_tagName, os_tagsToAdd),1);
  }

  console.log( os_tagsToAdd );
  console.log( os_tagsToRemove );
});

// Onload remove array fill
$("[type='checkbox']").each(function(){
  if( $(this).is(":checked") ){
    os_tagsToRemove.push($(this).attr("id"));
  }else{
    os_tagsToAdd.push($(this).attr("id"));
  }
});

console.log( os_tagsToAdd );
console.log( os_tagsToRemove );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<span class="os_section-name">first</span>
<input type="checkbox" class="os_section-check" id="first" checked="checked">
<label class="os_section-slider" for="first">Label</label>

<div class="line-space-between"></div>

<span class="os_section-name">second</span>
<input type="checkbox" class="os_section-check" id="second">
<label class="os_section-slider" for="second">Label</label>