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. Android线程间异步通信机制源码分析

    本文首先从整体架构分析了Android整个线程间消息传递机制,然后从源码角度介绍了各个组件的作用和完成的任务.文中并未对基础概念进行介绍,关于threadLacal和垃圾回收等等机制请自行研究. 基础 ...

  2. sql server restore DB issue

    error occurs when restoring the backup file of sql server(DB.bak) to run the above t-sql will shoot ...

  3. APUE学习笔记3——文件和目录

    1 简介 之前学习了执行I/O操作的基本函数,主要是围绕普通文件I/O的打开.读或写.下面继续学习Unix文件系统的其他特征和文件的基本性质.我们将从stat函数开始,了解stat结构所代表的文件属性 ...

  4. 我的C++笔记(类与对象）

    /* * Main.cpp * * Created on: 2015-7-24 * Author: feiruo */ /* * 类与对象: * * 1.抽象: * 面向对象方法中的抽象,是指对具体问 ...

  5. 查看tomcat的内存情况

    查看现有tomcat的内存大小情况 1.启动tomcat 2.访问 http://localhost:8080/manager/status ,并输入您在安装tomcat时输入的用户与口令,如 adm ...

  6. vc++如何创建窗口

    创建一个mfc工程,AppWizard可以用来增加和选择一些特性 可以发现一共有五个类,每一个类都有一个基类,都是mfc基础类库中的类 例如将一个类拷贝一下,将CFrameWnd到msdn中查找一下, ...

  7. 移动端开发-Day1

    什么是Node? 它是一个基于Chrome v8引擎的js运行环境,采用高效轻量级的事件驱动,非阻塞式的I/O模型. 非阻塞I/O? 例如,当程序运行到某一函数时,调用后立即返回,不需要等待函数执行完 ...

  8. 【深入理解Java虚拟机】自动内存管理机制——内存区域划分

      Java与C++之间有一堵有内存动态分配和垃圾收集技术所围成的"高墙",墙外面的人想进去,墙里面的人却想出来.C/C++程序员既拥有每一个对象的所有权,同时也担负着每一个对象生 ...

  9. [SDOI2016]数字配对（费用流+贪心+trick）

    重点是如何找到可以配对的\(a[i]\)和\(a[j]\). 把\(a[i]\)分解质因数.设\(a[i]\)分解出的质因数的数量为\(cnt[i]\). 设\(a[i]\geq a[j]\) 那么\ ...

  10. 学习笔记——ST表

    作用: 给定一个数列 ai O(nlogn) 预处理 O(1) 查询区间最值 实现: 定义f(i,j) 为ai开始,包括ai的连续2^j个元素的最值 下面以最大值为例: f(i,j)表示max{ak} ...