如何在 jQuery 中仅检查所有类别复选框或其他剩余类别复选框答案

【问题标题】：How to check only all-categories checkbox or other remaing category checkboxes in jQuery如何在 jQuery 中仅检查所有类别复选框或其他剩余类别复选框
【发布时间】：2016-10-06 11:59:11
【问题描述】：

例如，如果我在给定示例中选中所有类别复选框，则应取消选中所有剩余的复选框，如果我选中一个或多个剩余类别，则应取消选中所有类别复选框。

Here is the jsfiddle

HTML

 <div class="search-dropdown">
<input type="checkbox" class="checkbox all-categories" name="all-categories" id="all-categories" value="" /><label for="keys">All categories</label>
<hr>
<ul class="checkboxlist_list">
    <li><input type="checkbox" class="checkbox electical"  /><label>electrical</label><br/></li>
    <li><input type="checkbox" class="checkbox mechanical" /><label>mechanical</label><br/></li>
    <li><input type="checkbox" class="checkbox construction"/><label>construction</label><br/></li>
</ul>
</div>
<p class="category-holder">Select Category</p>

Javascript

    $('.search-dropdown input[type="checkbox"]').on("change", function(){
    var categories = [];
    $('.checkbox:checked').each(function(){        
        var category = $(this).next().text();
        categories.push(category);
    });
    $(".category-holder").html(categories.join(", "));
    if (!$(".category-holder").text().trim().length) {
    $(".category-holder").text("Select Category");
    }
});

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

您可以将这些代码行添加到您的 change 事件处理程序中：

if($(this).is('.all-categories:checked')){
    $('.checkboxlist_list .checkbox').prop('checked', false);
    return $(".category-holder").text($(this).next().text());
}
$('.all-categories').prop('checked', false);
// ... the rest of your code ...

JSFiddle

可选（甚至更好），您可以将所有复选框设置为:checked，并在.all-categories 复选框为:checked 时禁用它们

if($(this).is('.all-categories:checked')){
    $('.checkboxlist_list .checkbox').prop({'checked': 1, 'disabled' : 1});
    return $(".category-holder").text($(this).next().text());
}else if($(this).is('.all-categories')){
    $('.checkboxlist_list .checkbox').prop('disabled', 0);
}
// ... the rest of your code ...

JSFiddle

【讨论】：

如果我选中所有类别复选框，那么我不想要的所有其他复选框都会被选中。
好的，等一下 :-) 刚刚意识到你真正想要的是什么
如何处理多个复选框我的意思是添加所有主题和其他主题复选框
你能做一个 HTML JSFiddle 例子吗？
发到这里就可以了

【解决方案2】：

试试这个，它在 JS 中。

function checkAll(ele) {
 var checkboxes = document.getElementsByTagName('input');
 if (ele.checked) {
     for (var i = 0; i < checkboxes.length; i++) {
         if (checkboxes[i].type == 'checkbox') {
             checkboxes[i].checked = true;
         }
     }
 } else {
     for (var i = 0; i < checkboxes.length; i++) {
         console.log(i)
         if (checkboxes[i].type == 'checkbox') {
             checkboxes[i].checked = false;
         }
     }
 }

}

<input type='checkbox' name='select_all' onClick='javascript:checkAll(this)'>

【讨论】：

【解决方案3】：

您可以尝试检查当前单击的元素 id 是否为all-categories 如果是，请使用 `removeAttr() 取消选中 checkboxlist_list 类中的所有复选框：

if($(this).attr('id')=='all-categories'){
     $('.checkboxlist_list .checkbox').removeAttr('checked')
}

【讨论】：