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>
 
 

checkbox的使用总结的更多相关文章

  1. WPF CheckBox 样式

    <Style x:Key="FocusVisual"> <Setter Property="Control.Template"> < ...

  2. 计算Div标签内Checkbox个数或已被disabled的个数

    先看下面的html: 计算div内的checkbox个数:$('#divmod input[type="checkbox"]').length 计算div内checkbox被dis ...

  3. 前端开发：css技巧，如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。

    前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...

  4. Razor语法中绑定一个值给checkbox

    在ASP.NET MVC开发中,需要绑定一个值给checkbox标签,如下面写法,它们运行时是没有问题,照样能跑. 看看上面的语法,在绑定时,它却出现绿浪线.提不绑定的值is not a valid ...

  5. Checkbox 模板和样式

    <Style TargetType="{x:Type CheckBox}"> <Setter Property="FontFamily" Va ...

  6. RadioButton与CheckBox

    笔者长期从事于数据库的开发,算了,不提当年了,因为一直用的是小语种(PowerBuilder),还是来说说这两个最常见的控件吧! RadioButton(单选)和CheckBox(多选) 先来看看继承 ...

  7. Listview的Item中有CheckBox、Button等的焦点处理

    ListView的item布局中有CheckBox.Button等会获取焦点的控件会抢走焦点,造成ListView的item点击事件相应不了. 解决方法:控件设置 android:clickable= ...

  8. 实现CheckBox的三种选中状态（全选、半选、不选）在GridView中模拟树形的功能

    度娘了很多帖子,只说三种状态要用图片替换来做,但没找到有用的例子,被逼自己写了一个 三方控件肯定是很多的,如jstree,可以直接用 由于公司的UDS限制,不能上传图片,只能文字说明了. 就是要在gr ...

  9. 用css改变默认的checkbox样式

    自己常用的改变checkbox样式的两个方法: 一.利用background用图片代替checkbox效果 缺点:你首先得有一张好看的图片 优点:浏览器兼容性好 <!doctype html&g ...

  10. WPF 自定义CheckBox样式

    自定义CheckBox样式,mark一下,方便以后参考复用 设计介绍: 1.一般CheckBox模板太难看了,肯定要重写其中的模板 2.模板状态为未选中状态和选中状态,设置为默认未选中就好了. 默认状 ...

随机推荐

  1. 如何在Hexo中实现自适应响应式相册功能

    用最清晰简洁的方法整合一个响应式相册 效果 技术选型 由于我选用的主题使用了fancyBox作为图片弹出展示的框架,查看后表示很不错,能满足需要 http://fancyapps.com/fancyb ...

  2. mybatis 高级映射和spring整合之与Spring整合（6）

    mybatis 高级映射和spring整合之mybatis与Spring整合 3.0 mybatis和spring整合(掌握) 3.1 整合思路 需求spring通过单例方式管理SqlSessionF ...

  3. 利用Axis2默认口令安全漏洞入侵WebService网站

    近期,在黑吧安全网上关注了几则利用Axis2默认口令进行渗透测试的案例,大家的渗透思路基本一致,利用的技术工具也大致相同,我在总结这几则案例的基础之上进行了技术思路的拓展.黑吧安全网Axis2默认口令 ...

  4. aes加密算法的一个问题

    百度“delphi aes”出来的结果,千篇一律,都是相互转载,但是没有人发现EldoS, Alexander Ionov于1998-2001写的ElAes.pas代码,存在一个问题. 相同的key和 ...

  5. [转]C++内存管理

    [导语] 内存管理是C++最令人切齿痛恨的问题,也是C++最有争议的问题,C++高手从中获得了更好的性能,更大的自由,C++菜鸟的收获则是一遍一遍的检查代码和对C++的痛恨,但内存管理在C++中无处不 ...

  6. pwiz, a model generator

    文档链接 pwiz is a little script that ships with peewee and is capable of introspecting an existing data ...

  7. ubuntu 搭建简易的https网站

    ubuntu 搭建简易的https网站 环境:ubuntu 12.04.5 openssl (1)创建一个ssl的保存路径 sudo mkdir /opt/nginx/ssl (2)生存密钥sudo ...

  8. ubuntu16.04 国内源（网易、阿里）

    ubuntu16.04 网易源 deb http://mirrors.163.com/ubuntu/ xenial main restricted universe multiversedeb htt ...

  9. 【BZOJ2806】【CTSC2012】Cheat - 广义后缀自动机+单调队列优化DP

    题意: Description Input 第一行两个整数N,M表示待检查的作文数量,和小强的标准作文库的行数 接下来M行的01串,表示标准作文库 接下来N行的01串,表示N篇作文 Output N行 ...

  10. ZOJ 2314 Reactor Cooling

    Reactor Cooling Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Origina ...