1 checkbox如何選中時顯示內容，不被選中時隱藏內容
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" charset="utf-8"/>
<script src="jquery-1.11.1/jquery.js"></script>
<style type="text/css">
#div1,#div2{
display:none;
}
</style>
<script type="text/javascript">
//the main function
function checkBox(cb) {
var oOne = document.getElementById("one");
var oTwo = document.getElementById("two");
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
if (cb.id=="one") {
oTwo.checked= false;
oDiv2.style.display="none"
if (cb.checked) {
oDiv1.style.display="block";
} else {
oDiv1.style.display="none";
}
} else if (cb.id=="two") {
oDiv1.checked = false;
if (cb.checked) {
oDiv2.style.display="block";
} else {
oDiv2.style.display="none";
}
oDiv1.style.display="none"
}
}
</script>
</head>
<body>
<input type="checkbox" id="one" onClick="checkBox(this);"/><label for="">111111</label><br />
<div id="div1">111111111111</div><br />
<input type="checkbox" id="two" onClick="checkBox(this);"/><label for="">22222222222</label><br />
<div id="div2">2222222</div><br />
<!--<form name=myform>
<div align="center">選框 1
<input type="checkbox" id="div1chkbox" name="div1chkbox" onClick="checkBoxValidate(this);" >
<div id="div1" style="display:none;width:100px;height:100px;border:solid 1px red;">
我是div1
</div>
選框 2
<input type="checkbox" id="div2chkbox" name="div2chkbox" onClick="checkBoxValidate(this);">
<div id="div2" style="display:none;width:160px;height:100px;border:solid 1px red; position:absolute; left:100px; top:100px;">
我是div2
</div>
</div>
</form>
</form> -->
</body>
</html>
2 checkbox實現全選、全不選和反選功能（含ajax）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>學員信息查詢管理系統</h1>
條件：<p><input id="txt_search" type="text" /> <input id="btn_search" type="button" value="模糊查詢"/>
<input type="button" id="del_btn" value="刪除"/>
<table id="tab" border="1">
<tr>
<th><input type="checkbox" id="selectAll"/>全選 <input type="checkbox" id="ReverseSelect"/>反選</th>
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>成績</th>
<th>班級</th>
</tr>
</table>
<script src="jquery-1.11.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(selectStu())
function selectStu() {
$.ajax("StuList",{
type:"post",
data:{"method":"finList"},
success:function(data){
//循環遍歷
$.each(data,function(index,obj){
$("#tab").append(
"<tr>"+
//首先從數據庫讀出數據 因為數據庫主鍵是學號，而且對學號進行操作
//在input里面的值value添加數據中的學號
"<td><input name='stu' value='"+obj.stuNo+"' type='checkbox' /></td>"+
"<td>"+obj.stuNo+"</td>"+
"<td>"+obj.stuName+"</td>"+
"<td>"+obj.stuSex+"</td>"+
"<td>"+obj.stuAge+"</td>"+
"<td>"+obj.score+"</td>"+
"<td>"+obj.className+"</td>"+
"</tr>"
);
})
}
})
}
$(function(){
$("#btn_search").on("click",function(){
var text=$("#txt_search").val();
$("#tab tr").not(":first").remove();
$.ajax("StuList",{
type:"post",
data:{"method":"FuzzyQuery","likeInfo":text},
success:function(data){
$.each(data,function(index,obj){
$("#tab").append(
"<tr>"+
"<td><input name='stu' type='checkbox' value='"+obj.stuNo+"' /></td>"+
"<td>"+obj.stuNo+"</td>"+
"<td>"+obj.stuName+"</td>"+
"<td>"+obj.stuSex+"</td>"+
"<td>"+obj.stuAge+"</td>"+
"<td>"+obj.score+"</td>"+
"<td>"+obj.className+"</td>"+
"</tr>"
);
})
}
})
});
//這個方法可以替代toggle() toggle()在jQuery 1.9中已經移除
//兩個函數的綁定
var i=0;
//全選
$("#selectAll").on("click",function(){
if(i==0){
//把所有復選框選中
$("#tab td :checkbox").prop("checked", true);
i=1;
}else{
$("#tab td :checkbox").prop("checked", false);
i=0;
}
});
//反選
$("#ReverseSelect").on("click",function(){
$("#tab td :checkbox").each(function(){
//遍歷所有復選框，然后取值進行 !非操作
$(this).prop("checked", !$(this).prop("checked"));
})
});
$("#del_btn").on("click",function(){
var arr=new Array();
$('#tab input:checkbox[name=stu]:checked').each(function(i){
arr[i] = $(this).val();
});
var vals = arr.join(",");
$.ajax("StuList",{
type:"post",
data:{"method":"deleteStu","delId":vals},
success:function(data){
if(data==-500){
alert("刪除失敗！");
}else{
alert("刪除成功\n"+data+"條");
$("#tab tr").not(":first").remove();
selectStu();
}
}
});
})
})
</script>
</body>
</html>