js全选，反选，取消

最新推荐文章于 2022-08-26 17:40:58 发布

Jxchen

最新推荐文章于 2022-08-26 17:40:58 发布

阅读量1.3k

点赞数

分类专栏： javascript 文章标签： function

本文链接：https://blog.youkuaiyun.com/jacky_Jxchen/article/details/6598772

版权

javascript 专栏收录该内容

24 篇文章

订阅专栏

<p>
	<label><input type="checkbox" name="checkBoxName" id=""/>北京</label>
	<label><input type="checkbox" name="checkBoxName" id=""/>上海</label>
	<label><input type="checkbox" name="checkBoxName" id=""/>大连</label>
	<label><input type="checkbox" name="checkBoxName" id=""/>河南</label>
	<label><input type="checkbox" name="checkBoxName" id=""/>东北</label>
</p>
<p>
	<button id="btn-a">全选</button>
	<button id="btn-b">反选</button>
	<button id="btn-c">取消</button>
</p>

<script type="text/javascript">
	<!--
	function selectAll(obj,checkBoxName){
		var o = document.getElementById(obj)
		var boxName = document.getElementsByName(checkBoxName);
		o.onclick = function(){
			for(var i = 0; i < boxName.length; i++){
				var temp = boxName[i];
				temp.checked = true;
			}
		}
	}	
	selectAll('btn-a','checkBoxName');
	function invert(obj,checkBoxName){
		var o = document.getElementById(obj)
		var boxName = document.getElementsByName(checkBoxName);
		o.onclick = function(){
			for(var i = 0; i < boxName.length; i++){
				var temp = boxName[i];
				temp.checked = !temp.checked;
			}
		}
	}
	invert('btn-b','checkBoxName');
	function cancel(obj,checkBoxName){
		var o = document.getElementById(obj)
		var boxName = document.getElementsByName(checkBoxName);
		o.onclick = function(){
			for(var i = 0; i < boxName.length; i++){
				var temp = boxName[i];
				temp.checked = false;
			}
		}
	}
	cancel('btn-c','checkBoxName');
	//-->
</script>

初学JS来记录一下，以后用的时候方便查找……