Question

我有5个复选框，我用它们作为一组数据的过滤器（rails app），我很难让Javascript停下来操作我需要的复选框。

条件：

如果选择了all，请取消选中其他任何＆＃39;复选框，但是如果取消选中，则不会选中任何复选框，然后选中它。
如果未选中任何复选框，请将all设置为选中
如果有其他4＆＃39;其他＆＃39;选中复选框，取消选中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语句的第一部分保持不变，我不确定如何返回true始终选中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

问题是，else If语句将始终注册为“true”，因为它仍然是一个选择器并且会响铃，因为它仍然返回一个真值，即使选择器实际上并不抓取任何东西。

以这个小提琴为例。

https://jsfiddle.net/tx4L5rcL/

JS

let a = $('.item').find('*').not('div');

console.log(a ? 'here' : 'nothere');

HTML

<div class="item">
  <div class="item-1">Heklklo</div>
  <div class="item-2"></div>
</div>

为了得到你想要的东西，考虑做这样的事情：

else if (all_status_filters.not(':checked').length)

Answer 2

正如Mike McCaughan所说，你需要检查未选中复选框的数量。
复选框非常棘手，可以取消选中＆＃39;你需要通过道具来操纵它而不是attr Setting "checked" for a checkbox with jQuery?
第一个嵌套中的条件看起来不对。看起来您想检查是否未选中所有状态复选框，但包括全部复选框。这应该改为所有其他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
       }
    });
});

根据点击的内容

2 个答案: