临近过年,刚学IT没多久的小白在这里祝大家在新的一年里:新春快乐,月月赚钱,天天开心,时时快乐,分分精彩,秒秒幸福,事事顺利
古人云:学而时习之,不亦说乎.
学习后经常温习所学的知识,也是件令人愉悦的事情.
今日复习JQuery时,想着用它来实现一下选择的功能也是很方便的.
<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 />
<input type="checkbox" />游戏<br />
<button>全选</button>
<button>全不选</button>
<button>反选</button>
</body>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.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>