Question

我创建了一个切换开关复选框，并使用下面的逻辑：

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

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

1-B]如果元素是UNchecked，则将其更改为checked并将该元素添加到名为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>

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

1 个答案: