jQueryのトグルスイッチのチェックボックスを変更し、私はトグルスイッチのチェックボックスを作成し、以下のロジックaplied

Question

を遅らせる属性「をチェック」：ユーザーがトグルスイッチclass="os_section-slider"をクリックするとinput含む要素の名前がある場合]

1のスクリプトがチェックされますチェック

1-A]の要素がチェックされている場合、素子がオフの場合、チェックに変更し、配列にその要素を追加する]チェックを外すに変更し、os_tagsToRemove

1-Bという名前の配列にその要素を追加

JS 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> 

os_tagsToAdd

命名

$(".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); } }); 

私の問題は私のページのリロード、で、私のトグルスイッチは、モーダルボックスに表示され、私はchecked属性が削除/追加されるまで2回クリックする必要がスイッチャーボタンをクリックしてください。

最初のクリックは常に値を配列にプッシュするか、配列から削除しますが、$(this).prev().attr("checked", true);も$(this).prev().attr("checked", false);も適用されません。

各スイッチャーボタンを2回クリックした後、その時点からのすべてが正常に機能します。

Answer 1

配列を/アドインをロード削除するには、これを追加します。

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

次に、あなたのロジックはすべて逆転しました。

まず、for="anID"と定義されているラベルをクリックすると、対応するチェックボックスのチェック状態が既に変更されています。スクリプトを書く必要はありません。

次に、チェックされている場合、チェックボックスの状態が変更された後にこの確認が行われたことを知る必要があります。だから私はあなたの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>