自己封装的一个checkbook工具

最新推荐文章于 2022-07-28 08:40:27 发布

最新推荐文章于 2022-07-28 08:40:27 发布 · 153 阅读

文章标签：

#JavaScript #HTML #ViewUI

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文提供了一套实用的JavaScript工具，用于实现复选框的全选、反选、获取选中值等功能。通过简单的API调用，即可轻松完成对一组复选框的操作。

不废话，上代码

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')">
		全选&nbsp;&nbsp;&nbsp;
		<input type="button" value="全选" onclick="allCheck('son')">
		&nbsp;&nbsp;&nbsp;
		<input type="button" value="反选" onclick="fanCheck('son')">
		&nbsp;&nbsp;&nbsp;
		<input type="button" value="不选" onclick="allUncheck('son')">
		&nbsp;&nbsp;&nbsp;
		<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>