zoukankan      html  css  js  c++  java
  • javascript 动态控制复选框的选择和取消

    这里就需要引入一个jquery-1.4.2.js 就行了,因为用到了里面的选择器

    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript">
     	function CheckBox(){
    		var outupType = $('input[name="outupType"]:checked').val();	
    		var outuparray = $('input[name="outupType"]').length;
    		var i=0;
    		var scheck = 	$('input[name="outupType"]')[i].checked;
    		var scheck1 = 	$('input[name="outupType"]')[i+1].checked;
    		var scheck2 =	$('input[name="outupType"]')[i+2].checked;
    		var scheck3 =	$('input[name="outupType"]')[i+3].checked;
    		var scheck4 =	$('input[name="outupType"]')[i+4].checked;
    		if(scheck == true ){
    			$('input[name="outupType"]')[i+1].checked = true;
    			$('input[name="outupType"]')[i+2].checked = true;
    			$('input[name="outupType"]')[i+3].checked = true;
    			$('input[name="outupType"]')[i+4].checked = true;
    		}else{
    			$('input[name="outupType"]')[i+1].checked = false;
    			$('input[name="outupType"]')[i+2].checked = false;
    			$('input[name="outupType"]')[i+3].checked = false;
    			$('input[name="outupType"]')[i+4].checked = false;
    		}
    		
    
    		
    	}
    	
    	function CheckBoxs(){
    		var i=0;
    		var scheck = 	$('input[name="outupType"]')[i].checked;
    		var scheck1 = 	$('input[name="outupType"]')[i+1].checked;
    		var scheck2 =	$('input[name="outupType"]')[i+2].checked;
    		var scheck3 =	$('input[name="outupType"]')[i+3].checked;
    		var scheck4 =	$('input[name="outupType"]')[i+4].checked;
    	
    		if(scheck1==true && scheck2 == true && scheck3 == true && scheck4 == true){
    			$('input[name="outupType"]')[i].checked  = true;
    		}else{
    			$('input[name="outupType"]')[i].checked  = false;
    		}
    	}
    </script>
    </head>
    <body>
    <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
    <!-- 出力内容  BEGIN -->
    		<tr height="25" class="tyouhyou_8pt">
    		<td bgcolor="#FFB56A" width="65" align="center">出力内容</td>
    		
    		<td align="left">	
    			<table>
    			<tr>
    				<td width="90"><input type="checkbox" onclick="CheckBox()" name="outupType" value="1" />全項目選択</td>
    			</tr>
    			<tr>
    				<td width="90"><input type="checkbox" onclick="CheckBoxs()" name="outupType" value="2" />個人情報</td>
    			</tr>
    			<tr>
    				<td width="90"><input type="checkbox" onclick="CheckBoxs()" name="outupType" value="3" />緊急連絡先</td>
    			</tr>
    			<tr>
    				<td width="90"><input type="checkbox" onclick="CheckBoxs()" name="outupType" value="4" />金融機関</td>
    			</tr>
    			<tr>
    				<td width="160"><input type="checkbox"  onclick="CheckBoxs()"name="outupType" value="5" />職業 服・靴のサイズ</td>
    			</tr>
    			</table>
    		</td>
    		</tr>
    		</body>
    	<!-- 出力内容  END -->
    	</html>
    

      

  • 相关阅读:
    响应式布局和BootStrap 全局CSS样式
    javascript中的undefined与null的区别
    before(),after(),prepend(),append()等新DOM方法简介
    解决文字和text-decoration:underline下划线重叠问题
    CSS3 linear-gradient线性渐变实现虚线等简单实用图形
    用Javascript获取页面元素的位置
    rem、px、em(手机端h5页面屏幕适配的几种方法)
    用flex和rem实现移动端页面
    HTML5新增的form属性简介(转载至张鑫旭)
    vue实现图片放大
  • 原文地址:https://www.cnblogs.com/sunxun/p/4447839.html
Copyright © 2011-2022 走看看