Question

我的页面上有复选框：

<div class="mail-control">
    <input class="magic-checkbox select-doc" type="checkbox">
    <label for="email-list-1"></label>
</div>

我也有选择和取消选中所有复选框的链接：

<ul class="dropdown-menu">
    <li><a href="#" id="select-all-list">Select all</a></li>
    <li><a href="#" id="deselect-all-list">Deselect all</a></li>
</ul>

此代码选中并取消选中复选框：

$('#select-all-list').on('click', function() {
    $('.select-doc').prop('checked', true);
});

$('#deselect-all-list').on('click', function() {
    $('.select-doc').prop('checked', true);
});

问题是：当我选中所有复选框时 - 我无法手动取消选中其中一些复选框（直接使用我的鼠标）。我该怎么办？

Answer 1

更改此

$('#deselect-all-list').on('click', function() {
    $('.select-doc').prop('checked', true);
});

到这个

$('#deselect-all-list').on('click', function() {
    $('.select-doc').prop('checked', false);
});

Answer 2

您在false点击事件中缺少deselect-all-list属性：

＆＃13;

$('#select-all-list').on('click', function() {
    $('.select-doc').prop('checked', true);
});

$('#deselect-all-list').on('click', function() {
    $('.select-doc').prop('checked', false);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mail-control">
    <input class="magic-checkbox select-doc" type="checkbox">
    <label for="email-list-1"></label>
    <input class="magic-checkbox select-doc" type="checkbox">
    <label for="email-list-1"></label>
    <input class="magic-checkbox select-doc" type="checkbox">
    <label for="email-list-1"></label>
</div>


<ul class="dropdown-menu">
    <li><a href="#" id="select-all-list">Select all</a></li>
    <li><a href="#" id="deselect-all-list">Deselect all</a></li>
</ul>

＆＃13;

jQuery复选框check-uncheck问题

2 个答案: