jQuery interrupteur à bascule case - changement « cochée » attribut Délai de

Question

J'ai créé une case à cocher interrupteur à bascule et aplied la logique ci-dessous:

1] Si l'utilisateur clique sur le commutateur à bascule class="os_section-slider" le script vérifiera si le nom de l'élément contenant input est vérifié.

1-A] Si l'élément est vérifié puis changer pour unChecked et ajouter cet élément dans un tableau nommé os_tagsToRemove

1-B] Si l'élément est décochée changer ensuite à contrôler et ajouter cet élément dans un tableau nommé 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); 
    } 
}); 

Mon problème est, quand mes rechargements page et mon interrupteur à bascule apparaît dans une boîte modale et je tente de cliquer sur le bouton de switcher je dois cliquer 2 fois jusqu'à ce que l'attribut checked est ajouté/supprimé.

Le premier clic pousse toujours la valeur dans le tableau ou le supprime du tableau mais ne s'applique pas $(this).prev().attr("checked", true); ni $(this).prev().attr("checked", false);. Mais après le deuxième clic sur chaque bouton de commutation, tout fonctionne à partir de ce moment.

Answer 1

Ajouter cette option pour charger votre Ajout/Suppression de tableaux:

// 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")); 
    } 
}); 

Ensuite, votre logique a été tout inversée. D'abord, lorsque vous cliquez sur l'étiquette, qui est définie comme for="anID", l'état vérifié de la case à cocher correspondante change déjà. Vous n'avez pas à écrire cela. Puis, quand vous regardez si elle est cochée, vous devez savoir que cette vérification est faite APRES que l'état de la case à cocher a changé. J'ai donc inversé vos conditions if.

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>