javascript - 全选复选框仅在某些时间有效

我有一个带有复选框的表单，以及表单内隐藏的全选按钮。我使用jQuery侦听表单外部的按钮单击，然后“单击”隐藏的按钮元素以全选。有时页面加载了，我单击按钮，效果很好。您可以多次单击它，并且它们都按预期选中和取消选中。表格提交完美。

但是，其他时候，页面将加载，我单击该按钮，但没有任何反应。无论我单击多少次，它们都不会检查。我发现如果页面静置超过10秒钟而不执行任何操作，这种情况就会发生很多。但是它也可能在页面加载时发生。我不明白为什么。我没有看到的地方的代码中有错误吗？

$(document).ready(function(){
    $('#select-all').click(function(event) {
        if(this.checked) {
            // Iterate each checkbox
            $(':checkbox').each(function() {
                this.checked = true;
                $('label.choice').toggleClass("choice-text-color");
            });
        } else {
            $(':checkbox').each(function() {
                this.checked = false;
                $('label.choice').toggleClass("choice-text-color");
            });
        }
     });

    $("#selectAll").click(function() {
            $('#select-all').click()
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="selectAll" class="btn btn-secondary my-2 my-sm-0"
                type="button" name="selectAll">Select All</button>


<form>
<input type="checkbox" id="1"><label for="1" class="choice">ABC</label>
<input type="checkbox" id="2"><label for="2" class="choice">DEF</label>
  (....etc.....)

<input type="checkbox" id="select-all" style="display: none;">
            <input type="submit" style="display: none;">

        </form>

最佳答案

在我看来，您的问题是由于添加了多余的标记以促进选择所有功能以及与其绑定的JavaScript / JQuery所致。

您只需要一个按钮（无论是否在表单中就可以）来触发选择/取消选择操作。同样，由于按钮将不会传输任何数据，因此不应使用name属性。

另外，如果您不希望用户看到表单的“提交”按钮，则不要在表单中添加任何按钮。然后，您可以使用$(form).submit()以编程方式提交表单。

// Passing a function into JQuery is the same as document.ready
$(function(){
  // JQuery recommends the use of "on" to bind events
  $('#selectAll').on("click", function(event) {
    $(':checkbox').each(function() {
       this.checked = true;
    });
    $('label.choice').addClass("choice-text-color"); // Update the class use
  });
});

.choice-text-color {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="selectAll" class="btn btn-secondary my-2 my-sm-0" type="button">Select All</button>
<form>
  <input type="checkbox" id="1"><label for="1" class="choice">ABC</label>
  <input type="checkbox" id="2"><label for="2" class="choice">DEF</label>
</form>

关于javascript - 全选复选框仅在某些时间有效，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57739706/