飞龙博客

前端文字教程

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

feilong.org 修订于2011-08-27 06:09:51

飞龙在网上搜罗了一些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);
}-->

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

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

所在分类： 网站开发

新作：

旧文：