1,新建一个 check_all_none.html.
全选/不选在很多时候我们都会使用到,在Ext Core出来之前,我一直使用纯javascript写的全选,反选.虽然可以实现,但代码始终还是不够简洁.现在我们使用Ext Core,简单的几句代码就可以实现这一个功能.
实现方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>选中列表中的所有Checkbox</title>
<script type="text/javascript" src="../../ext-core-debug.js"></script>
<script type="text/javascript" src="check_all_none.js"></script>
<link rel="stylesheet" href="check_all_none.css" />
</head>
<body>
<table id="fun" border="0" align="center" cellpadding="0" cellspacing="1">
<tr id="header">
<td width="25"><input type="checkbox" id="checkall" name="checkall"></td>
<td>Name</td>
</tr>
<tr>
<td>
<input type="checkbox" value="1" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 1</td>
</tr>
<tr>
<td>
<input type="checkbox" value="2" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 2</td>
</tr>
<tr>
<td>
<input type="checkbox" value="3" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 3</td>
</tr>
<tr>
<td>
<input type="checkbox" value="4" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 4</td>
</tr>
<tr>
<td>
<input type="checkbox" value="5" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 5</td>
</tr>
<tr>
<td>
<input type="checkbox" value="6" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 6</td>
</tr>
<tr>
<td>
<input type="checkbox" value="7" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 7</td>
</tr>
<tr>
<td>
<input type="checkbox" value="8" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 8</td>
</tr>
<tr>
<td>
<input type="checkbox" value="9" id="funcode[]" name="funcode[]"></td>
<td>ExtCore 9</td>
</tr>
</tbody>
</table>
<p style="text-align:center; font-size:18px;">© 2010 <a href="http://extjs.org.cn" target="_blank">ExtJs.org.cn</a> | extjscn@126.com </p>
</body>
</html>
2,新加一个被引用的 check_all_none.js .
Ext.onReady(function(){
Ext.get('checkall').on('click',function(){
if(this.dom.checked){
Ext.select('input[name^=funcode]').each(function(){this.dom.checked = true;});
}else{
Ext.select('input[name^=funcode]').each(function(){this.dom.checked = false;});
}
});
});
3.css的引用
check_all_none.css
@charset "utf-8";
/* CSS Document */
#fun {
background-color:#999;
width:500px;
}
#fun td {
background-color:#fff;
}
#header td {
background-color:#333;
color:#fff;
font-weight:bold;
}
403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
