【js】赵雅智_js复选框全选反选全不贿选案例-JavaSript-爱易网页

【js】赵雅智_js复选框全选反选全不贿选案例

日期：2014-05-16　浏览次数：20313 次

【js】赵雅智_js复选框全选反选全不选案例

方法1：

html界面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>nameNode.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>
  <script type="text/javascript" src="./js/nameNode1.js" charset="UTF-8"></script>

  
<body>
		<div>
			兴趣爱好：
			<br>
			<br>
			<input type="checkbox" name="fav" value="look" checked="checked">
			看书
			<input type="checkbox" name="fav" value="write">
			写字
			<input type="checkbox" name="fav" value="drow">
			画画
			<input type="checkbox" name="fav" value="dubao">
			读报
			<input type="checkbox" name="fav" value="TV">
			看电视
		</div>

		<div>
			<input type="radio" name="hx" id="qx" value="1">
			全选
			<input type="radio" name="hx" id="fx" value="2">
			反选
			<input type="radio" name="hx" id="qbx" value="0">
			全不选
		</div>
	</body>
</html>

js代码：

window.onload = function(){
		var favs = document.getElementsByName("fav");
	//获取id = "qx"的元素节点的对象
		var qx = document.getElementById("qx");
		//注册事件
		qx.onclick = function(){
		//遍历所有 那么="fav"的节点对象并且改this.checked=true
			for(var i=0;i<favs.length;i++){
				var fav = favs[i];
				fav.checked="vhecked";
			}		
		}

		//
		var fx = document.getElementById("fx");
		//注册事件
		fx.onclick = function(){
		//遍历所有 name="fav"的节点对象并且改this.checked=true
			for(var i=0;i<favs.length;i++){
				var fav = favs[i];
				fav.checked=!fav.checked;
			}		
		}

		var qbx = document.getElementById("qbx");
		//注册事件
		qbx.onclick = function(){
		//遍历所有 name="fav"的节点对象并且改this.checked=true
			for(var i=0;i<favs.length;i++){
				//获取具体的某个对象
				var fav = favs[i];
				//修改checked属性
				fav.checked=false;
			}		
		}
}

方法2：

html界面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>nameNode.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>
<script type="text/javascript" src="./js/nameNode2.js" charset="UTF-8"></script>
  
<body>
		<div>
			兴趣爱好：
			<br>
			<br>
			<input type="checkbox" name="fav" value="look" checked="checked">
			看书
			<input type="checkbox" name="fav" value="write">
			写字
			<input type="checkbox" name="fav" value="drow">
			画画
			<input type="checkbox" name="fav" value="dubao">
			读报

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

【js】赵雅智_js复选框全选反选全不贿选案例

方法1：

方法2：

相关资料更多>

推荐阅读更多>