复选框过滤器仅使用＆＃34;＆＃34;按钮

Question

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

当您将鼠标悬停在每个复选框上时，只有＆＃34;只有＆＃34;右侧的链接正在出现。

我有一个问题。当你点击＆＃34;只有＆＃34;链接它的工作，但当我要去另一个复选框后，取消选中并点击＆＃34; only＆＃34;链接它没有选中复选框。

有任何建议怎么做？

＆＃13;

＆＃13;

$('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();
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

还有一件事......当没有选中任何复选框时，最好添加一个按钮＆＃34; all＆＃34;再次检查所有复选框。怎么可能实现？

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

＆＃13;

＆＃13;

$('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();
});

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 4

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

    $('li #only-link').click(function (e) {
        e.preventDefault();
        // Uncheck all.
        $('input:checkbox').prop('checked', false);
      
        // Check the correct one.
        $(this).siblings('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>