全选反选案例
来源：互联网 发布：mysql服务安装失败 编辑：程序博客网 时间：2024/05/29 09:35
教你如何写出规范的全选反选，不好你打我：
直接上代码吧！
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
label:hover{
cursor: pointer;
}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="1">
<tr bgcolor="#FFFF66">
<td>
<label><input name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</label>
</td>
<td align="center">复选框全选示例 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon1" type="checkbox" value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</label>
</td>
<td> 作用： </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon2" type="checkbox" value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</label>
</td>
<td> a.单击列头复选框全选或全不选子项 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon3" type="checkbox" value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</label>
</td>
<td> b.只要有一个子项没有选中，则取消列头的选中状态 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon4" type="checkbox" value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</label>
</td>
<td> c.当所有子项目选中时，列头复选框自动置为选中状态 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon5" type="checkbox" value='5' onclick="ChkSonClick('chkSon','chkAll')" />5</label>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon6" type="checkbox" value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</label>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon7" type="checkbox" value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</label>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon8" type="checkbox" value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</label>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon9" type="checkbox" value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</label>
</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>
<label><input name="chkSon" id="chkSon10" type="checkbox" value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</label>
</td>
<td>d.将复选框反过来选</td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#66FFFF">
<td>
<label><input name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</label>
</td>
<td align="center">反选示例</td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
<script src="../bootstrap/js/jquery.js"></script>
<script>
// --列头全选框被单击---
function ChkAllClick(sonName, cbAllId){
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
var tempState=cbAll.checked;
for(i=0;i<arrSon.length;i++) {
if(arrSon[i].checked!=tempState)
arrSon[i].click();
}
}
// --子项复选框被单击---
function ChkSonClick(sonName, cbAllId) {
var arrSon = document.getElementsByName(sonName);
var cbAll = document.getElementById(cbAllId);
for(var i=0; i<arrSon.length; i++) {
if(!arrSon[i].checked) {
cbAll.checked = false;
return;
}
}
cbAll.checked = true;
}
// --反选被单击---
function ChkOppClick(sonName){
var arrSon = document.getElementsByName(sonName);
for(i=0;i<arrSon.length;i++) {
arrSon[i].click();
}
}
/*function chkAll1(){
if($('input[type=checkbox]').prop('checked')){
$('input[type=checkbox]').prop('checked',false);
return;
}
$('input[type=checkbox]').prop('checked',true);
}*/
/*function chkAll1(){
var checkboxes =document.querySelectorAll('input[type=checkbox]');
for(var i=0;i<checkboxes.length;i++){
checkboxes[i].checked = true;
}
}*/
/*function sum(a,b){
return a+b;
}
function sum2(a){
return function(b){
return a+b;
}
}*/
/*var arr=[];
for(var i=0;i<10;i++){
var num=Math.floor(Math.random()*(100-10)+10);
arr.push(num);
}
function asc(a,b){
return a>b;
}
arr.sort(asc);
document.write(arr);*/
/*var arr = [1,3,8,5,4,9,2,6,10,9,2];
function asc(a,b){
if(a>b){
return 1;
}
if(a<b){
return -1;
}
if(a=b){
return 0;
}
}
arr.sort(asc);
document.write(arr);*/
</script>
</body>
</html>
- 全选反选案例
- javaScript 全选 反选案例
- 全选，全不选，反选 案例
- JQuery应用案例--全选与反选
- jquery实现表格全选反选案例
- HTML复选框全选，全部选，反选案例
- web——全选和反选案例
- javascript全选 反选
- 全选，反选代码
- 全选反选
- jquery全选反选
- CListCtrl全选、反选
- jquery 全选反选
- CheckBoxList 全选，反选
- JS全选，反选
- Jquery 全选、反选
- javascript 全选 反选
- 全选和反选
- gets函数和fgets函数
- 算法 删数问题
- finally关键字
- MySQL 数据备份与还原
- wex5失败笔记（1）data组件加载数据失败原因
- 全选反选案例
- wordpress插件装太多？检测哪些插件占资源最多
- [LeetCode]Word Ladder
- 新
- 多线程程序与fork()分析
- POJ2406-Power Strings
- 8.4 类型变量的限定
- HBase-1.2.4 Allow block cache to be external分析
- 第十四周项目2-二叉树排序树中查找的路径
