飞龙博客

前端文字教程

Discuz x2 checkbox 全选或取消代码演示

feilong.org 修订于2011-08-15 12:02:54

Discuz x2 内置一套常用建站js代码，所以做discuz X2开发或网站前端开发，尽量用discuz现有的js成果，但是如何使用discuz官方文档没有演示。这里飞龙简单举例演示一下关于checkbox 全选和取消代码是如何使用的。本日志修订网址：http://feilong.org/discuz-checkbox-checkall-uncheckall 希望对你有用！

补充，需要全选反选飞龙jQuery解决方案的朋友，参见：http://feilong.org/check-uncheck-juery-solution

一、首先调用discuz X2的checkall()方法，在common.js里面。

/*
飞龙提示：
form,建议用 this.form
prefix, 指提交的 checkbox 数组变量名
checkall, 全选按钮的ID名称
tested by feilong on 20110815
*/
function checkall(form, prefix, checkall) {
	var checkall = checkall ? checkall : 'chkall';
	count = 0;
	for(var i = 0; i < form.elements.length; i++) {
		var e = form.elements[i];
		if(e.name && e.name != checkall && (!prefix || (prefix && e.name.match(prefix)))) {
			e.checked = form.elements[checkall].checked;
			if(e.checked) {
				count++;
			}
		}
	}
	return count;
}

或者直接外调commo.js也可以。

<script type="text/javascript" src="./static/js/common.js"></script>

其次看看html部分，需要一个form表单，需要用数组变量名，全选按钮要有id名，全部用字母。

<form action="" method="get||post" id="feilongform" name="flmusics">
<input name="lovemusic[]" id="music1" type="checkbox">
<input name="lovemusic[]" id="music2" type="checkbox">
<input name="lovemusic[]" id="music3" type="checkbox">
<input name="fl" id="chooseall" onclick="checkall(this.form, 'lovemusic', 'chooseall');" type="checkbox">
全选
</form>

最后飞龙把整个html文档放这里，方便朋友你直接取用分析。

<!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>Discuz x2 checkbox 全选和取消代码演示</title>
<!--js来源：discuz x2 20110531 tested by feilong on 20110815
<script type="text/javascript" src="./static/js/common.js"></script>
-->
<script type="text/javascript">
 
/*
飞龙提示：
form,建议用 this.form
prefix, 指提交的 checkbox 数组变量名
checkall, 全选按钮的ID名称
tested by feilong on 20110815
*/
function checkall(form, prefix, checkall) {
	var checkall = checkall ? checkall : 'chkall';
	count = 0;
	for(var i = 0; i < form.elements.length; i++) {
		var e = form.elements[i];
		if(e.name && e.name != checkall && (!prefix || (prefix && e.name.match(prefix)))) {
			e.checked = form.elements[checkall].checked;
			if(e.checked) {
				count++;
			}
		}
	}
	return count;
}
</script>
</head>
 
<body>
<form action="" method="get||post" id="feilongform" name="flmusics">
<input name="lovemusic[]" id="music1" type="checkbox">
<input name="lovemusic[]" id="music2" type="checkbox">
<input name="lovemusic[]" id="music3" type="checkbox">
<input name="fl" id="chooseall" onclick="checkall(this.form, 'lovemusic', 'chooseall');" type="checkbox">
全选
</form>
 
</body>
</html>

更新网址：https://feilong.org/discuz-checkbox-checkall-uncheckall
最初发布：20110815 12:02:54 feilong.org 于广州

加入收藏夹，查看更方便。

所在分类： 网站开发

新作：

旧文：