不废话,上代码
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" οnclick="checkAllElect('son','father')">
全选
<input type="button" value="全选" οnclick="allCheck('son')">
<input type="button" value="反选" οnclick="fanCheck('son')">
<input type="button" value="不选" οnclick="allUncheck('son')">
<input type="button" value="检测是否选中" οnclick="if(checkSelect('son')){alert('已经有选中项')}">
<input type="button" value="提交值" οnclick="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>