Question

仅当包含console.log("message")时，此复选框例程才起作用。删除“ console.log（）”，它将停止工作。怎么了？

目的：当用户取消选中带有class="one-role"的任何复选框时，带有id="all-roles"的复选框应被取消选中。

JQUERY：

// FAILS: This version (without console) does not uncheck "All"
$('.one-role').click(function() {
    if(! $(this).attr('checked'))
     $('#all-roles').prop('checked', false);
});


// WORKS: This version (with console) successfully unchecks "All"
$('.one-role').click(function() {
    if(! $(this).attr('checked'))
     console.log("one-role now unchecked");  // <--- without me, no worky!
     $('#all-roles').prop('checked', false);
}

HTML表单：

<input type="checkbox" name="include_role[]" value="all" checked="checked" id="all-roles">

<input type="checkbox" name="include_role[]" value="manager" checked="checked" class="one-role">
<input type="checkbox" name="include_role[]" value="owner" checked="checked" class="one-role">

<input type="submit" name="submit" value="Submit">

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
<script src="http://example.com/assets/jquery.scrollTo.min.js"></script>
<script src="http://example.com/assets/my_javascript.js"></script>

我尝试过的事情：

我正在Windows 10上使用Chrome。

我的.js文件最后加载。

更改js文件后，我将文件上传到服务器，并hard-refresh（CTRL刷新）我的浏览器。

-困惑

Answer 1

您的代码起作用的唯一原因是碰运气：if语句后没有大括号/括号时，仅第一行将成为条件if的一部分。换句话说，您的代码：

$('.one-role').click(function() {
    if(! $(this).attr('checked'))
      console.log("one-role now unchecked");
      $('#all-roles').prop('checked', false)
}

实际上等于：

$('.one-role').click(function() {
    if(! $(this).attr('checked')) {
      console.log("one-role now unchecked");
    }

    $('#all-roles').prop('checked', false)
}

这意味着您的#all-roles复选框始终未选中，这给人一种幻象。相反，您应该改用以下逻辑：

$('.one-role').change(function() {
  if (!this.checked)
    $('#all-roles').prop('checked', false);
});

但是，这是对我认为您想要的用户界面非常简单的解释。根据您的示例，我想您实际上想要的是

如果未选中任何 .one-role，则应取消选中#all-roles
选中所有 .one-role时，应选中#all-roles
未选中#all-roles时，应选中所有.one-role元素
选中#all-roles时，应选中所有.one-role元素

这将需要对您的逻辑进行一些修改：

// Changes to any `.one-role `will influence status of all roles
$('.one-role').change(function() {
  // Check if all `.one-roles` are checked
  var count = $('.one-role').length;
  var checked = $('.one-role').filter(':checked').length;
  
  // If none are checked, uncheck `#all-roles`
  if (!checked) {
    $('#all-roles')
      .prop('checked', false)
      .prop('indeterminate', false);
    return;
  }
  
  // If some but not all are checked, use indeterminate state
  if (count !== checked) {
    $('#all-roles')
      .prop('checked', false)
      .prop('indeterminate', true);
    return;
  }
  
  // Otherwise, we check it
  $('#all-roles')
    .prop('checked', true)
     .prop('indeterminate', false);
});

// Checking `#all-roles` should toggle all `.one-role`
$('#all-roles').change(function() {
  $('.one-role').prop('checked', this.checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="include_role[]" value="all" checked="checked" id="all-roles">

<input type="checkbox" name="include_role[]" value="manager" checked="checked" class="one-role">
<input type="checkbox" name="include_role[]" value="owner" checked="checked" class="one-role">

<input type="submit" name="submit" value="Submit">

为什么只有在显示“ console.log（）”时，此JS代码才起作用？

1 个答案: