input的type=[checkbox]全选取消全选,新生成元素点击事件

1.HTML

<table class="table">
	<tr class="tr">
		<td colspan="2">
			<span>
				<input type="checkbox" class="check_total"/>全选
			</span>
		</td>
	</tr>
	<tr class="tr">
		<td colspan="2" style="padding-left: 50px;">
			<div style="padding-top: 10px;padding-bottom: 10px;">
				<span style="margin-left: 10px;">
					<input type="checkbox" name="check_one" class="check_one" value="一级菜单A"/>一级菜单A
				</span>
				<span style="margin-left: 10px;">
					<input type="checkbox"  class="check_total_one"/>全选
				</span>
			</div>
			<div style="padding-top: 10px;padding-bottom: 10px;padding-left: 30px;">
				<span style="margin-left: 10px;">
					<input type="checkbox" name="check_two"  class="check_two" value="二级菜单A1"/>二级菜单A1
				</span>
				<span style="margin-left: 10px;">
				    <input type="checkbox" name="check_two"  class="check_two" value="二级菜单A2"/>二级菜单A2
				</span>
			</div>
		</td>
	</tr>
	<tr class="tr">
		<td colspan="2" style="padding-left: 50px;">
			<div style="padding-top: 10px;padding-bottom: 10px;">
						
				<span style="margin-left: 10px;">
					<input type="checkbox" name="check_one"  class="check_one" value="一级菜单B"/>一级菜单B
				</span style="margin-left: 10px;">
				<span style="margin-left: 10px;">
					<input type="checkbox"  class="check_total_one"/>全选
				</span>
			</div>
			<div  style="padding-top: 10px;padding-bottom: 10px;padding-left: 30px;">
				<span style="margin-left: 10px;">
					<input type="checkbox" name="check_two"  class="check_two" value="二级菜单B1"/>二级菜单B1
				</span>
				<span style="margin-left: 10px;">
					<input type="checkbox" name="check_two" class="check_two" value="二级菜单B2"/>二级菜单B2
				</span>
			</div>
		</td>
	</tr>
</table>

<button id="submit">提交</button>

2.js部分

<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	//全选(总全选)
	//新生成元素添加点击事件写法
	$(".table").delegate(".check_total","click",function(){
		$(this).parents("tr").siblings(".tr").find(".check_two,.check_one,.check_total_one").prop('checked',$(this).prop('checked'));			    
	});			
	//全选(一级 菜单后边的全选)
	$(".table").delegate(".check_total_one","click",function(){  
		$(this).parents("tr").find(".check_two,.check_one").prop('checked',$(this).prop('checked'));			     	});
	//二级菜单点击
	$(".table").delegate(".check_two","click",function(){  
		 var arr=$(this).parents(".tr").find("input[name='check_two']:checkbox:checked");
		 if(arr.length===0){			    	
			$(this).parents(".tr").find(".check_one").prop('checked',false);			    				    	
		 }else{			    	
			$(this).parents(".tr").find(".check_one").prop('checked',true);			    	
		 }			   
	});
	//点击提交按钮
	$("#submit").on("click",function(){
		var arr=[];
		$(':checked').not(".check_total_one").not(".check_total").each(function() {		
			arr.push($(this).val())				  
		});
		console.log(arr)
	});

</script>

3.效果


猜你喜欢

转载自blog.csdn.net/hangge0111/article/details/80831889