<!DOCTYPE html> <html>
<head> <meta charset="UTF-8"> <title></title> <style>
</style> </head>
<body> <input type="checkbox" />体育<br /> <input type="checkbox" />音乐<br /> <input type="checkbox" />美食<br /> <input type="checkbox" />科技<br /> <input type="checkbox" />健身<br /> <input type="checkbox" />娱乐<br /> <input type="checkbox" />政治<br /> <input type="checkbox" />汽车<br /> <input type="checkbox" />游戏<br /> <input type="checkbox" />摄影<br /> <button>全选</button> <button>全不选</button> <button>反选</button>
</body> <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script> <script> $(function() {
$('button:first').click(function() { // 此方式只能选择一次，再次选择会出问题 //$(':checkbox').attr('checked', true) $(':checkbox').prop('checked', true) })
$('button:eq(1)').click(function() { //$(':checkbox').attr('checked', false) $(':checkbox').prop('checked', false) })
$('button:last').click(function() { // 将每一个匹配的元素作为回调函数的上下文执行 $(':checkbox').each(function() { // 获取当前的选择状态，然后取反 var checked = !$(this).prop('checked') // 重新设置选中状态 $(this).prop('checked', checked) }) }) }) </script>
</html>
