Checkbox filters with "only“按钮

Question

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

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

我有一个问题。当你点击“唯一”链接，它的工作，但当我去另一个复选框后，所有被取消选中，并点击“唯一”链接，它没有选中复选框。

有什么建议怎么做吗？

​

$('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>

​

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

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>

​

Answer 2

你做了一个小改动

​

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

  $('li #only-link').click(function(e) {
    e.preventDefault();
    $('input:checkbox').prop('checked', true).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>

​

Answer 3

​

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

    $('li #only-link').click(function (e) {
        e.preventDefault();
         var ref = $(this);       
        $('input:checkbox').prop('checked', false);
        ref.parent().find('input:checkbox').prop('checked', true);
    });
}, 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>

​