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.效果


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值