Question

我有一系列复选框，这些复选框是根据我数据库中的表格中的选项生成的。我想在该范围内创建一个名为“VIEW ALL”的默认复选框，选中后，应取消选中所有其他复选框，但如果选中该范围内的任何复选框，则应保留所有现有复选框，但取消选中“查看”全部“复选框。

示例HTML：

 <input type="checkbox" name="attr[1][]" class="attr" value="ALL" checked />VIEW ALL
 <input type="checkbox" name="attr[1][]" class="attr" value="2" /> VALUE 2
 <input type="checkbox" name="attr[1][]" class="attr" value="5" /> VALUE 5
 <input type="checkbox" name="attr[1][]" class="attr" value="6" /> VALUE 6

示例jQuery：

 <script type="text/javascript">
$(document).ready(function() {

    // CATEGORY SELECTOR TO ADD ADDITIONAL CONTROLS:
    $(".attr").on("change",function() {
        var name = $(this).attr("name");
        var val = $(this).val();
        if(val === "ALL") {
            $(name).each(function(k,v) {
               $(this).removeAttr("checked"); 
            });
        } else {

        }
    });
});
</script>

在这个阶段，没有任何事情发生，它甚至都没有取消选择ALL。任何想法或建议将不胜感激。

以下是用于测试目的的jsfiddle：jsFiddle

Answer 1

您可以简单地检查它是否为“ALL”并取消选中所有排除“VIEW ALL”复选框，并在else循环中反之亦然。请参阅下面的演示，

PS：我在VIEW ALL复选框中添加了一个班级.all，以便于选择。

jsFiddle demo

$(document).ready(function () {
    // CATEGORY SELECTOR TO ADD ADDITIONAL CONTROLS:
    var $checkboxes = $('.attr');
    $(".attr").on("change", function () {
        if (this.checked && this.value == 'ALL') { //all is checked
            $checkboxes.not(this).prop('checked', false);
        } else { //some other is checked or unchecked
            $('.attr.all').prop('checked', false);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="attr[1][]" class="attr all" value="ALL" checked />VIEW ALL
<input type="checkbox" name="attr[1][]" class="attr" value="2" />VALUE 2
<input type="checkbox" name="attr[1][]" class="attr" value="5" />VALUE 5
<input type="checkbox" name="attr[1][]" class="attr" value="6" />VALUE 6

Answer 2

尝试如下：

HTML

  <input type="checkbox" name="attr[1][]" class="attr" value="ALL" />VIEW ALL

 $(document).ready(function() {

    // CATEGORY SELECTOR TO ADD ADDITIONAL CONTROLS:

    $(".attr").on("change",function() {
        var name = $(this).attr("name");
        var val = $(this).val();
        if(val === "ALL") {
            $('input[name^= "attr"]').prop('checked',$(this).is(":checked"));
        }
    });
});

DeMO

jQuery取消选中所有＆＃34; ALL＆＃34;选

2 个答案: