checkbox的使用总结
Posted jiangjiali1228
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox的使用总结相关的知识，希望对你有一定的参考价值。
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>
3 checkbox复选框和div click事件重叠，点击div后复选框也被选中，同时改变div颜色，否则则不选中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div
display: inline-block;
width: 100px;
margin-left: 10px;
</style>
<script src="Scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
//注册checkbox的click事件
$(document).on(‘click‘, ‘:checkbox‘, function (e)
//停止事件冒泡,当点击的是checkbox时,就不执行父div的click
e.stopPropagation();
var oCk = $(this), parentDiv = oCk.parent();
oCk.prop(‘checked‘) ? parentDiv.css(‘background-color‘, ‘blue‘) : parentDiv.css(‘background-color‘, ‘‘);
);
//注册div的click事件,点击div时动态执行checkbox的click事件
$(document).on(‘click‘, ‘div‘, function ()
$(this).find(‘:checkbox‘).click();
)
</script>
</head>
<body>
<div>
<input type="checkbox" />A
</div>
<div>
<input type="checkbox" />B
</div>
<div>
<input type="checkbox" />C
</div>
</body>
</html>
以上是关于checkbox的使用总结的主要内容，如果未能解决你的问题，请参考以下文章
jquery的checkbox,radio,select等方法总结
jquery的checkbox,radio,select等方法总结
jquery的checkbox,radio,select等方法总结