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>

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

1 个答案: