checkbox 的全选与全不选以及获取选择的值。
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
ul{ background-color: #dcdcdc;list-style:none;padding: 0px; width: 350px;border-radius:8px;}
li{ padding: 10px;}
</style>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('#handle').click(function(){
if($(this).attr('checked')){
//把所有checkbox选中
$('.toggle').attr('checked','true');
}else{
//清除所有选中的checkbox
$('.toggle').removeAttr('checked');
}
});
$('.toggle').click(function(){
if($('.toggle:checked').length==$('.toggle').length){
$('#handle').attr('checked','true');
}
if($('.toggle:checked').length<$('.toggle').length){
$('#handle').removeAttr('checked');
}
}); $('#getValue').click(function(){
var values='';
if($('.toggle:checked').length>0){
//循环遍历取出所有选中的checkbox节点下的<label>文本值
$('.toggle:checked').each(function(){
values+=$(this).next('label').html()+'<br/>';
});
$('#selected').html('Selected value:'+values);
}else{
$('#selected').html('Nothing selected');
}
});
});
</script>
</head>
<body>
<ul>
<li>
<input type="checkbox" id="handle"/>
<label for="handle"><strong>Toggle All</strong></label>
</li>
<li>
<input type="checkbox" class="toggle"/>
<label>Beijing</label>
</li>
<li>
<input type="checkbox" class="toggle"/>
<label>Shanghai</label>
</li>
<li>
<input type="checkbox" class="toggle"/>
<label>Guangzhou<label>
</li>
<li>
<input type="checkbox" class="toggle"/>
<label>Shenzhen</label>
</li>
<li>
<input type="button" id="getValue" value="Get Selected Values"/>
</li>
<li id="selected"></li>
</ul>
</body>
</html>