<!DOCTYPE html>
<html>
<head>
<title>test.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/jscript" src="../js/jquery-1.8.2.js"></script>
</head>
<body>
<input type="checkbox" name="test1" value="check1">选项1
<input type="checkbox" name="test2" value="check2">选项2
<input type="checkbox" name="test3" value="check3">选项3
<input type="checkbox" name="test4" value="check4">选项4
<input type="checkbox" name="test5" value="check5">选项5
<br>
<input type="checkbox" name="checkAll" value="checkAll">全选
</body>
<script type="text/javascript">
$("document").ready(function(){
$("input:eq(5)").click(function(){
if($(this).attr("checked")=="checked"){
$("input[value!=checkAll]").each(function(){
$(this).attr("checked","checked");
});
}else{
$("input[value!=checkAll]").each(function(){
$(this).attr("checked",null);
});
}
});
$("input[value!=checkAll]").each(function(){
$(this).click(function(){
if($(this).attr("checked")=="checked"){
var len=0;
$("input[value!=checkAll]").each(function(){
if($(this).attr("checked")=="checked"){
len++;
}
});
if(len==5){
$("input[value=checkAll]").attr("checked","checked");
}
}else{
$("input[value=checkAll]").attr("checked",null);
}
});
});
});
</script>
</html>
只要点击全部选中,所有选项都被选中
只要有一个选项没选中,全部选中选项就不被选中
当4个选项都选中,点击第五个选项的时候,全选选项就会被选中