全选复选框仅在某些时候有效

Question

我有一个带有复选框的表单，以及表单内的隐藏全选按钮。我使用 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>

Answer 1

在我看来，您的问题是由于您为促进全选功能和与之相关的 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>