全选不全选反选兼容火狐代码

最新推荐文章于 2019-07-06 02:50:54 发布

原创最新推荐文章于 2019-07-06 02:50:54 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #JavaScript #HTML #ViewUI

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文展示了一个使用HTML和JavaScript实现的兴趣爱好选择表单案例。通过JavaScript实现了全选、全不选及反选的功能，展示了如何操作DOM元素及处理用户交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>demo3.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
   请选择您的兴趣爱好<br>
	<input type='checkbox' id='yncheck'>全选/全不选</br>
	<input type="checkbox" name='hobby'>足球
	<input type="checkbox"  name='hobby'>篮球
	<input type="checkbox"  name='hobby'>桌球
	<input type="checkbox"  name='hobby'>乒乓球
	<input type="checkbox"  name='hobby'>羽毛球<br>
	<input id='allbutton' type='button' value='全选'>
	<input id='nobutton' type='button' value='全不选'>
	<input type='button' value='反选' id='unbutton'></br>
	<script language='JavaScript'>
		var allbutton = document.getElementById('allbutton');
		var nobutton = document.getElementById('nobutton');
		var hobby =   document.getElementsByName('hobby');
		var yncheck  =document.getElementById("yncheck")
		var unbutton  =document.getElementById("unbutton")
		
		
		allbutton.onclick= function(){
			for(var x=0;x<hobby.length;x++){
				//下面代码 不兼容火狐
				//hobby[x].setAttribute('checked','checked');
				hobby[x].checked='checked';
			}
		};
		var nobutton = document.getElementById('nobutton');
		
		nobutton.onclick = function(){
			for(var x=0;x<hobby.length;x++){
//				hobby[x].setAttribute('checked',null);
				hobby[x].checked=null;
			}
		}
		yncheck.onclick=function(){
//			if(!yncheck.getAttribute('checked')){
			if(!this.checked){
				for(var x=0;x<hobby.length;x++){
//				hobby[x].setAttribute('checked',null);
				hobby[x].checked=null;
				}
			}else{
				for(var x=0;x<hobby.length;x++){
//				hobby[x].setAttribute('checked','checked');
				hobby[x].checked='checked';
				}
			}
		}
		unbutton.onclick=function(){
			for(var x=0;x<hobby.length;x++){
//				if(hobby[x].getAttribute('checked')){
				if(hobby[x].checked){
//					hobby[x].setAttribute('checked',null);
					hobby[x].checked=null;
				}else{
//					hobby[x].setAttribute('checked','checked');
					hobby[x].checked='checked';
				}
			}
		}
	</script>
  </body>
</html>