Question

我有以下功能来选择/取消全选复选框。

$(function () {
        $("#selectall").click(function () {           
            $('.Employee').attr('checked', this.checked);
        });
        $(".Employee").click(function () {
            if ($(".Employee").length == $(".Employee:checked").length) {
                $("#selectall").attr("checked", "checked");
            } else {
                $("#selectall").removeAttr("checked");
            }

        });
    });

它工作正常，但我可以在页面加载时第一次选择/取消选择所有，第二次我需要重新加载页面。意味着它没有给出多个时间选择/取消选择功能。

Answer 1

第一个问题是您需要使用.prop()方法。这将读取javascript checked属性。使用HTML checked属性适用于第一个实例，但其余部分则失败。接下来，您需要稍微修改一下逻辑。我举了一个例子。观察javascript函数。最后，您应该使用change方法，或者最好使用.on('change', function(){ ... })，但我会让我的示例更接近原始帖子。

$(function () {
        $("#selectall").change(function () {
            $('.Employee').prop('checked', this.checked);
        });
        $(".Employee").change(function () {
            if ($(".Employee").length == $(".Employee:checked").length) {
                $('#selectall').prop('checked', this.checked);
            } else {
                $('#selectall').prop('checked', false);
            }
        });
    });

label {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <label>test 1: <input type="checkbox" class="Employee"></label>
  <label>test 2: <input type="checkbox" class="Employee"></label>
  <label>test 3: <input type="checkbox" class="Employee"></label>
  <label>test 4: <input type="checkbox" class="Employee"></label>
  <label>test 5: <input type="checkbox" class="Employee"></label>
</div>

<label>Select All: <input id="selectall" type="checkbox"></label>

选中div中的所有复选框

1 个答案: