jquery - 带有 "only"按钮的复选框过滤器

Question

我的侧边栏中有 6 个复选框。当页面加载时，它们已经被检查。

当您将鼠标悬停在每个复选框上时，右侧会出现“唯一”链接。

我有一个问题。当您单击“唯一”链接时，它可以工作，但是当我转到另一个复选框时，所有内容均未选中并单击“唯一”链接，它不会选中该复选框。

有什么建议吗？

$('li').hover(function () {
    $(this).append('<a href="#" id="only-link">only</a>');

    $('li #only-link').click(function (e) {
        e.preventDefault();
        $('input:checkbox').not($(this).siblings('input:checkbox')).prop('checked', false);
    });
}, function () {
    $('#only-link').remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type="checkbox" checked></li>
  <li><input type="checkbox" checked></li>
  <li><input type="checkbox" checked></li>
  <li><input type="checkbox" checked></li>
</ul>

还有一件事......当有任何复选框未选中时，最好附加一个按钮“all”来再次选中所有复选框。如何才能实现这一点呢？

Answer 1

首先，取消选中此 ul 中的每个复选框。然后检查单击的 li 的复选框:

// Add event listener for '#only-click' element
$(document).on('click', '#only-link', function(e) {
   e.preventDefault();
   var that = $(this);
   // Uncheck every checkbox in this ul
   that.closest('ul').find('input[type="checkbox"]').prop('checked', false);
   // Check this li's checkbox
   that.closest('li').children('input[type="checkbox"]').prop('checked', true);
});

// Perform hover handling
$('li').hover(function () {
    $(this).append('<a href="#" id="only-link">only</a>');
}, function () {
    $('#only-link').remove();
});

$(document).on('change', 'input[type="checkbox"]', function() {
   var thisUl = $(this).closest('ul');
   var checkedNum = thisUl.find('input[type="checkbox"]').filter(':checked').length;
   if (checkedNum == 0) {
      toggleAllBtn(thisUl, 'show');
   } else {
      toggleAllBtn(thisUl, 'hide');
   }
});

$(document).on('click', '#all', function() {
   $(this).closest('ul').find('input[type="checkbox"]').prop('checked', true);
   $(this).remove();
});

function toggleAllBtn(thisUl, mode) {
   if (thisUl && mode) {
      var btn = $('<button id="all">All</button>');
      switch (mode) {
         case 'show':
           thisUl.append(btn);
           break;
         case 'hide':
           thisUl.find('#all').remove();
           break;
      }
   }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type="checkbox" checked></li>
  <li><input type="checkbox" checked></li>
  <li><input type="checkbox" checked></li>
  <li><input type="checkbox" checked></li>
</ul>