点击“全选”按钮时选中所有的“多选框”如何实现? 点击“全选”按钮时选中所有的“多选框”如何实现? 解决方案 » 免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>全选与反选</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><script language="javascript">// --列头全选框被单击---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(); }}</script></head><body><form name="form1" method="post" action=""><table width="500" border="1"> <tr bgcolor="#FFFF66"> <td> <INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td> <td align="center">复选框全选示例 </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td> <td> 作用: </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td> <td> a.单击列头复选框全选或全不选子项 </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td> <td> b.只要有一个子项没有选中,则取消列头的选中状态 </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td> <td> c.当所有子项目选中时,列头复选框自动置为选中状态 </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon5" type="checkbox" value='5' onclick="ChkSonClick('chkSon','chkAll')" />5</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon6" type="checkbox" value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon7" type="checkbox" value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon8" type="checkbox" value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon9" type="checkbox" value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td><INPUT name="chkSon" id="chkSon10" type="checkbox" value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td> <td>d.将复选框反过来选</td> <td> </td> <td> </td> </tr> <tr bgcolor="#66FFFF"> <td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td> <td align="center">反选示例</td> <td> </td> <td> </td> </tr></table></form></body></html>楼主 这个一搜一大堆js 全选。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script type="text/javascript">window.onload = function() { document.getElementById('btn').onclick = function() { var obj = document.getElementsByTagName('input'); //获取文档中所有的input元素 for (var i = 0; i < obj.length; i ++) { if (obj[i].type == 'checkbox') { obj[i].checked = true; //设置复选框元素对象的checked属性值为true就能勾选该复选框;false即为取消选择 } } }}</script></head><body><form> <input type="checkbox" />1<br /> <input type="checkbox" />2<br /> <input type="button" id="btn" value="全选" /></form></body></html> 一个菜单效果的BUG 关于JS的同步问题。 关于extjs的事件执行 iframe坐标的问题(砸锅卖铁问问题) 怎么去除不需要的0? DsoFramer 文档控件里面的一个word,怎么获取其中的页数或者相应标签 如何在使用window.open()打开一个新的页面以后,这个页面自动关闭 第一次来,请问IFrame能否在IE中被鼠标动态调整大小和拖动?Div呢? 这段程序错哪儿哪 jquery参数传递问题 jquery 怎样实现div 的滚动条自动滚动? 怎么触发onclick
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>全选与反选</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
// --列头全选框被单击---
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();
}
}
</script>
</head><body>
<form name="form1" method="post" action="">
<table width="500" border="1">
<tr bgcolor="#FFFF66">
<td>
<INPUT name="chkAll" id="chkAll" title="全选" onClick="ChkAllClick('chkSon','chkAll')" type="checkbox" />全选</td>
<td align="center">复选框全选示例 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon1" type="checkbox" value='1' onclick="ChkSonClick('chkSon','chkAll')" />1</td>
<td> 作用: </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon2" type="checkbox" value='2' onclick="ChkSonClick('chkSon','chkAll')" />2</td>
<td> a.单击列头复选框全选或全不选子项 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon3" type="checkbox" value='3' onclick="ChkSonClick('chkSon','chkAll')" />3</td>
<td> b.只要有一个子项没有选中,则取消列头的选中状态 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon4" type="checkbox" value='4' onclick="ChkSonClick('chkSon','chkAll')" />4</td>
<td> c.当所有子项目选中时,列头复选框自动置为选中状态 </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon5" type="checkbox" value='5' onclick="ChkSonClick('chkSon','chkAll')" />5</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon6" type="checkbox" value='6' onclick="ChkSonClick('chkSon','chkAll')" />6</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon7" type="checkbox" value='7' onclick="ChkSonClick('chkSon','chkAll')" />7</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon8" type="checkbox" value='8' onclick="ChkSonClick('chkSon','chkAll')" />8</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon9" type="checkbox" value='9' onclick="ChkSonClick('chkSon','chkAll')" />9</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><INPUT name="chkSon" id="chkSon10" type="checkbox" value='10' onclick="ChkSonClick('chkSon','chkAll')" />10</td>
<td>d.将复选框反过来选</td>
<td> </td>
<td> </td>
</tr>
<tr bgcolor="#66FFFF">
<td><INPUT name="chkOpposite" id="chkOpposite" title="反选" onClick="ChkOppClick('chkSon')" type="checkbox" />反选</td>
<td align="center">反选示例</td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
楼主 这个一搜一大堆js 全选。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
window.onload = function() {
document.getElementById('btn').onclick = function() {
var obj = document.getElementsByTagName('input'); //获取文档中所有的input元素
for (var i = 0; i < obj.length; i ++) {
if (obj[i].type == 'checkbox') {
obj[i].checked = true; //设置复选框元素对象的checked属性值为true就能勾选该复选框;false即为取消选择
}
}
}
}
</script>
</head><body>
<form>
<input type="checkbox" />1<br />
<input type="checkbox" />2<br />
<input type="button" id="btn" value="全选" />
</form>
</body>
</html>