飞龙博客

妙法莲华经

checkbox复选框全选反选至少选中一项完整解决方案

feilong.org 修订于2012-03-09 04:36:24

飞龙在网上搜罗了一些checkbox全选反选的js代码,同时找了至少有一个checkbox项被选中的js代码,反复测试整理后与大家分享。本日志更新网址:http://feilong.org/checkbox-choose-all-atleast-one-checked 飞龙第3次修订于20120301 ,希望对您有用!

补充,checkbox全选反选代码其实飞龙已经写过日志,参见:http://feilong.org/discuz-checkbox-checkall-uncheckall 这里的js代码更加简明详尽,并且与至少有一个checkbox被选中结合,可以说是关于checkbox复选框的较完整的解决方案。

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

//a、checkbox全选/反选按钮, js代码
function checkall(formid, checkname,type) {//all parames are strings.
	var formobj=document.getElementById(formid);
	var count=0;var elength=formobj.elements.length;//alert(elength);
	for(var i=0; i < elength; i++) { //飞龙提示: 必须使用英文半角 < 
		var e = formobj.elements[i];
		var ename=e.name;  //alert(ename);//alert(checkname);		
		if(ename && (ename==checkname)) {
			//e.checked = formobj.elements[clickwhat].checked;
if(type=='revert'){if(e.checked){e.checked=false;}else{e.checked=true;count++;}
}else if(type=='all'){e.checked=true;}
		}
	}
	return count;
}//used by feilong.org
 
 
//b、提交表单,检查提示至少有一个checkbox项被选中, js代码
function haschecked(formid){
//var pr=document.getElementsByName(c);//方法一:直接选择name,局限:和具体表单脱节
var checkboxs=document.getElementById(formid).getElementsByTagName('input');
//可以将几个不同的表单区分开来,即使checkbox的name一样,也不会发生冲突。这正是飞龙想要的结果!	
 
var len = checkboxs.length;
var checked = false;
for (i = 0; i < len; i++){ //飞龙提示: 必须使用英文半角 < 
if (checkboxs[i].checked == true){
checked = true;
break;
}
}
 
if (!checked){
alert("提示:请至少选择一项!");return false;
}else{return true;}
 
//else{alert("飞龙提示:已经至少选择了一个checkbox项!");}//else,can be neglected and deleted
 
}//20110827 beijing

那么上面的两个js如何运用呢,飞龙举例说明如下。

下面是checkbox全选反选js代码,以及验证checkbox至少有一项被选中js代码的综合html写法和用法

<!--飞龙测试了checkall的功能,并检查复选框checkbox至少有一项被选中 -->
 
<button onclick="checkall('list', 'jiluids[]','revert');">反选</button>
<button onclick="checkall('list', 'jiluids[]','all');">全选</button>
 
<form id="shop" action="" method="get">
<input type="checkbox" name='wordpressthemes[]' value='is selling in'>
<input type="checkbox" name='wordpressthemes[]' value='feilongorg'>
<input type="checkbox" name='wordpressthemes[]' value='.taobao.com'>
 
<input type="submit" value="飞龙网店在哪里" onclick="var has=haschecked('shop');if(!has) return false;">
</form>

飞龙提示:checkname如果带[],那么好处是php可以直接识别为数组。下面是php和discuzX2的测试代码:

<?php
$wpthemes=$_GET['wordpressthemes'];print_r($wpthemes);
?>
<!--{eval 
$wpthemes=$_GET['wordpressthemes'];print_r($wpthemes);
}-->

更新网址:http://feilong.org/checkbox-choose-all-atleast-one-checked
最初发布:20110827 06:09:51 feilong.org 于广州

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

所在分类: 网站开发

新作:

旧文:

飞龙前端QQ群