带“仅”按钮的复选框过滤器

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>

有一件事更多...当有任何复选框取消选中这将是很好追加一个按钮，“所有”，再次检查所有的复选框。如何才能实现？

Answer 1

首先，取消选中该UL每一个复选框。然后检查点击李的复选框：

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

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>