jQuery 切换开关复选框 - 更改 "checked" 属性延迟

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 次直到选中的属性为 added/removed。

第一次点击总是只会将值推入数组或将其从数组中删除，但不会应用 $(this).prev().attr("checked", true); 或 $(this).prev().attr("checked", false);。

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

Answer 1

添加这个以加载您的 add/remove 数组：

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

jQuery 切换开关复选框 - 更改 "checked" 属性延迟

jQuery toggle switch checkbox - changing "checked" attribute delay

javascript

checkbox

jquery

togglebutton