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.

I don't get how you click on your empty labels... And I don't get why you attach the click events on the labels instead of the checkboxes. Explain that. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Sep 7, 2017 at 5:57
@LouysPatriceBessette I need my script to change the checked attribute for each element in the way that the source code of the page will be changed too. When You have a default checkbox then if You check/uncheck an element's input it will not hard code checked="checked" into the source code of the page. — BB-8
– BB-8, Commented Sep 7, 2017 at 6:07

Louys Patrice Bessette · Accepted Answer · 2017-09-07 06:42:15Z

2

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>

edited Sep 7, 2017 at 6:42

answered Sep 7, 2017 at 6:17

Louys Patrice Bessette

34k7 gold badges40 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Louys Patrice Bessette Over a year ago

Your script is fixed. Feel free to ask questions if it ain't clear!

Louys Patrice Bessette Over a year ago

Notice that a direct click on the checkboxes mess that all... But I suppose you use some nice CSS to hide it anyway. ;)

Collectives™ on Stack Overflow

jQuery toggle switch checkbox - changing "checked" attribute delay

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related