javascript - 根据点击的内容操作 5 个复选框

Question

我有 5 个复选框用作一组数据(rails 应用程序)的过滤器，我很难让 Javascript 下来操作我需要的复选框。

条件:

• 如果选择了 all，请取消选中任何“其他”复选框，但如果取消选中此复选框，则不会选中任何复选框，然后保持选中状态。
• 如果没有复选框被选中，设置all为checked
• 如果选中任何 4 个“其他”复选框，取消选中all

本质上，必须始终检查其中一个，all 过滤器是默认设置，但是，当检查任何其他过滤器时，不能检查 all如果 all 被选中，那么其他的都不能。

到目前为止的代码

jQuery(function($) {
    // all checkbox 
    var all_checkbox = $('#orderStatusAll');
    // 'other' checkboxes
    var open_checkbox = $('#orderStatusOpen');
    var complete_checkbox = $('#orderStatusCompleted');
    var reactivated_checkbox = $('#orderStatusReactivated');
    var canceled_checkbox = $('#orderStatusCanceled');

    var status_filter_form = $('#orderStatusFilters');
    var all_status_filters = status_filter_form.find('input[type=checkbox]');
    var filter_status_all = $('#filterStatusAll').find('input[type=checkbox]');
    var filter_status_other = $('#filterStatusOther').find('input[type=checkbox]');

    all_status_filters.on('change', function() {

       if ($(this).attr('id') === 'orderStatusAll' ) {
           if (all_status_filters.not(':checked')) {
               $(this).attr('checked', true);
               $(this).closest('label.checkbox').addClass('checked');
           } else {
               filter_status_other.each(function() {
                   $(this).attr('checked', false);        
                   $(this).closest('label.checkbox')
                   .removeClass('checked');
               });
           }
           status_filter_form.submit();
       } else if (all_status_filters.not(':checked')) {
           all_checkbox.attr('checked', true);
           all_checkbox.closest('label.checkbox').addClass('checked');
           status_filter_form.submit();
       } else {
           all_checkbox.attr('checked', false);
           all_checkbox.closest('label.checkbox').removeClass('checked');
           status_filter_form.submit();
       }
    });
});

以上遵循了我需要的逻辑，但显然它不起作用。我不确定如果所有复选框都未选中并且上面的 else if 部分总是发生并且随后 if 语句的第一部分在 orderStatusAll 始终选中 all 复选框。

Javascript 不是我的强项，因此非常感谢任何帮助和理解!谢谢!

编辑 - HTML

<div class="panel-collapse collapse in" aria-expanded="true" id="statusFilters">
      <div class="panel-body">
        <%= form_tag(external_order_status_filter_path(current_user.client_id), { remote: true, id: 'orderStatusFilters' } ) do %>
          <div id="filterStatusAll">
            <label class="checkbox checked">
              <%= check_box_tag 'status[]', "All", true, { data: { toggle: 'checkbox' }, id: 'orderStatusAll' } %>
              All
              <span class="pull-right">
                [<%= co_status_count_helper(current_user.client, nil) %>]
              </span>
            </label>
          </div>
          <div id="filterStatusOther">
            <label class="checkbox">
              <%= check_box_tag 'status[]', "Open", false, { data: { toggle: 'checkbox' }, id: 'orderStatusOpen' } %>
              Open
              <span class="pull-right">
                [<%= co_status_count_helper(current_user.client, "Open") %>]
              </span>
            </label>
            <label class="checkbox">
              <%= check_box_tag 'status[]', "Completed", false, { data: { toggle: 'checkbox' }, id: 'orderStatusCompleted' } %>
              Completed
              <span class="pull-right">
                [<%= co_status_count_helper(current_user.client, "Completed") %>]
              </span>
            </label>
            <label class="checkbox">
              <%= check_box_tag 'status[]', "Reactivated", false, { data: { toggle: 'checkbox' }, id: 'orderStatusReactivated' } %>
              Reactivated
              <span class="pull-right">
                [<%= co_status_count_helper(current_user.client, "Reactivated") %>]
              </span>
            </label>
            <label class="checkbox">
              <%= check_box_tag 'status[]', "Canceled", false, { data: { toggle: 'checkbox' }, id: 'orderStatusCanceled' } %>
              Canceled
              <span class="pull-right">
                [<%= co_status_count_helper(current_user.client, "Canceled") %>]
              </span>
            </label>
          </div>
        <% end %>
      </div>
    </div>

Answer 1

1. 正如 Mike McCaughan 所说，您需要检查未选中复选框的数量。
2. 复选框是一个很难“取消选中”的复选框，您需要通过 prop 而不是 attr 来操作它 Setting "checked" for a checkbox with jQuery?
3. 第一个嵌套的条件看起来不对。看起来您想要检查所有状态复选框是否未选中，但其中包括所有复选框。这应该更改为仅所有其他 4 个复选框。

生成的脚本(删除不相关的代码后)应该如下所示，这里是带有简化 html 的 jsfiddle 链接 https://jsfiddle.net/45jg4aa7/2/:

jQuery(function($) {
    var tempConsole = $('#tempConsole');
    // all checkbox 
    var all_checkbox = $('#orderStatusAll');
    // 'other' checkboxes
    var open_checkbox = $('#orderStatusOpen');
    var complete_checkbox = $('#orderStatusCompleted');
    var reactivated_checkbox = $('#orderStatusReactivated');
    var canceled_checkbox = $('#orderStatusCanceled');
    var status_filter_form = $('#orderStatusFilters');
    var all_status_filters = status_filter_form.find('input[type="checkbox"]');
    var filter_status_all = $('#filterStatusAll').find('input[type="checkbox"]');
    var filter_status_other = $('#filterStatusOther').find('input[type="checkbox"]');

    all_status_filters.on('change', function() {
       if ($(this).attr('id') === 'orderStatusAll' ) {
           if (filter_status_other.not(':checked').length === filter_status_other.length) {
               $(this).prop('checked', true);
               // more code
           }
           else {
               filter_status_other.each(function() {
                   $(this).prop('checked', false);        
                   // mode code
               });
           } 
           // more code
       } else if (filter_status_other.not(':checked').length === filter_status_other.length) {
           all_checkbox.prop('checked', true);
           // more code
       } else {
           all_checkbox.prop('checked', false);
           // more code
       }
    });
});