自各儿封装的一个checkbook工具
不废话,上代码
CheckBoxTool.js 代码:
/***
*
* 万里孤鸿 无聊之作
*/
/**
* 复选框 按钮全选的公共方法
*
* @param {}
* son
* @param {}
* father
*/
function checkAllElect(son, father) {
var sons = document.getElementsByName(son);
var fa = document.getElementById(father);
if (fa.checked == true) {
for (i = 0; i < sons.length; i++) {
sons[i].checked = true;
}
} else {
for (i = 0; i < sons.length; i++) {
sons[i].checked = false;
}
}
}
/**
* 判断是否选中
*
* @param {}
* son
*/
function checkSelect(son) {
var sons = document.getElementsByName(son);
var a = 0;
for (i = 0; i < sons.length; i++) {
if (sons[i].checked == true) {
a++;
}
}
if (a > 0) {
return true;
} else
return false;
}
/**
* 获取所选复选框的值
* @param {} son
* @return {Boolean}
*/
function getSelect(son) {
var sons = document.getElementsByName(son);
var str='';
for (i = 0; i < sons.length; i++) {
if (sons[i].checked == true) {
str+=sons[i].value+'_';
}
}
return str.substring(0,str.length-1);
}
/**
* 点击按钮,复选框全选
*
* @param {}
* sons
*/
function allCheck(son) {
var sons = document.getElementsByName(son);
for (i = 0; i < sons.length; i++) {
sons[i].checked = true;
}
}
/**
* 点击按钮,复选框全不选
*
* @param {}
* sons
*/
function allUncheck(son) {
var sons = document.getElementsByName(son);
for (i = 0; i < sons.length; i++) {
sons[i].checked = false;
}
}
/**
* 复选框反选
*
* @param {}
* son
*/
function fanCheck(son) {
var sons = document.getElementsByName(son);
for (i = 0; i < sons.length; i++) {
sons[i].checked = !sons[i].checked;
}
}
html代码:
<html> <head> <title>万里孤鸿之复选框工具</title> </head> <script type="text/javascript" src="CheckBoxTool.js"></script> <body> <input type="checkbox" id="father" onclick="checkAllElect('son','father')"> 全选 <input type="button" value="全选" onclick="allCheck('son')"> <input type="button" value="反选" onclick="fanCheck('son')"> <input type="button" value="不选" onclick="allUncheck('son')"> <input type="button" value="检测是否选中" onclick="if(checkSelect('son')){alert('已经有选中项')}"> <input type="button" value="提交值" onclick="alert(getSelect('son'))"> <hr> <input type="checkbox" name="son" value='万'>万 <input type="checkbox" name="son" value='里'>里 <input type="checkbox" name="son" value='孤'>孤 <input type="checkbox" name="son" value='鸿'>鸿 <input type="checkbox" name="son" value='风'>风 <input type="checkbox" name="son" value='云'>云 <input type="checkbox" name="son" value='雄'>雄 <input type="checkbox" name="son" value='霸'>霸 </body> </html>