HTML实现该样式:
实现代码-body中:
请选择您的爱好!
<hr />
<input type="checkbox"/>足球
<input type="checkbox"/>篮球
<input type="checkbox"/>游泳
<input type="checkbox"/>唱歌
<p></p>
<input type="button" id="checkAll" value="全 选"/>
<input type="button" id="noChoice" value="全不选"/>
<input type="button" id="selectInvert" value="反 选"/>
jQuery实现全选,全不选和反选:
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$('#checkAll').click(function(){
$('input[type="checkbox"]').prop('checked',true);
});
$('#noChoice').click(function(){
$('input[type="checkbox"]').prop('checked',false);
});
$('#selectInvert').click(function(){
$('input[type="checkbox"]').each(function(){
$(this).prop('checked', !$(this).prop('checked'));
});
});
})
</script>