jQuery切换开关复选框 - 更改“已检查”属性延迟

Question

我创建了一个切换开关复选框并应用了以下逻辑：

1] 如果用户点击切换开关class="os_section-slider"，脚本将检查是否检查了包含元素名称的input。

1-A] 如果元素被选中，则将其更改为未选中并将该元素添加到名为os_tagsToRemove的数组中

1-B] 如果元素未选中，则将其更改为选中并将该元素添加到名为 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);
    }
});

我的问题是，当我的页面重新加载并且我的切换开关出现在模式框中并且我尝试单击切换器按钮时，我必须单击 2 次，直到添加/删除选中的属性。

第一次单击始终只将值推入数组或将其从数组中删除，但不适用于$(this).prev().attr("checked", true); 或$(this).prev().attr("checked", false);。

但在第二次点击每个切换器按钮后，从那一刻起一切正常。

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>