Question

求javascript checkbox 选中事件代码

后道工序大项分类，假设大项是胶装，后面三个是他的子分类小项。我想要代码是在控制编辑状态下：如果先点击大项“胶装”为true，则它的子分类三个小项目前两个就会默认被选择为true，第三个“锁线”就为false，可选可不选。只要前两个小项“上胶封皮”和“折页配页”为true的话，大项“胶装”为true；第三个小项可选可不选。

如果先点击第3个小项“锁线”为true的话，则其他所有的项都为true；
分一定给大人们~~请帮忙 很急~~
因为俺是初学者，所以才不会写嘛！还有因为是动态的，下面是页面显示的代码，应该怎么破？

<table width="500px" cellpadding="0" cellspacing="1" class="pricebox">
<tr style="border-bottom: 2px solid #ccc;">
<th><img alt="" src="../../Content/images/2.png" />  <font size="4">后道工序加工</font></th>
</tr>
<tr>
<td style="background:#F4F4F4;">
<ul class="items_list page_margin_top clearfix" style="padding-top:5px;">
<li><span><input name='after' type='checkbox' value='3141*胶装*2'/>  胶装</span><div class='value'>胶装</div></li><li><span><input name='after' type='checkbox' value='3142*上胶封皮*2'/>  上胶封皮</span><div class='value'>上胶封皮</div></li><li><span><input name='after' type='checkbox' value='3143*折页配页*1'/>  折页配页</span><div class='value'>折页配页</div></li><li><span><input name='after' type='checkbox' value='3144*锁线*0'/>  锁线</span><div class='value'>锁线</div></li>
</ul>
</td>
</tr>
</table>
也就是说我想实现，“胶装”是大分类，胶装的流程就是折页配页、上胶封皮，而锁线是可选可不选的。这样，第一二个小项可以弄成不可手动选择，都是跟随大项的选择而选择，大项取消而取消，这样可以吗？

下面是后道工序的js，请大神帮忙看看，怎么在这个基础上实现我上面说的那些东西，谢谢！





Answer 1

只是选中有影响？取消互不关联？

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
(function($){
	$(function(){
		$('input[name=after]:first').click(function(){
			if($(this).prop('checked')){
				$(this).prop('checked',true);
				$('input[name=after]:eq(1)').prop('checked',true);
				$('input[name=after]:eq(2)').prop('checked',true);			
			}
		});
		$('input[name=after]:last').click(function(){
			if($(this).prop('checked')){				
				$('input[name=after]').prop('checked',true);
			}
		});
	});
})(jQuery);
</script>

追问

我是新手不是很懂，取消应该也需要关联的，大项不选，小项肯定也不选，小项取消大项也不选，最后一个小项取消，其他的无变化，最后一个小项选择的话，其他就全选。应该是这样，我不是很懂啊。

追答

<script>
(function($){
$(function(){
$('input[name=after]').each(function(index){
$(this).click(function(){
switch(index){
case 0:
if($(this).is(':checked'))
$('input[name=after]:last').siblings().prop('checked',true);
else
$('input[name=after]').prop('checked',false);
break;
case 3:
if($(this).is(':checked'))
$('input[name=after]').prop('checked',true);
break;
default:
return false;
}
});
});
});
})(jQuery);
</script>

追问

感谢这么有耐心，不过还是不对啊。我把这四个选项用1234表示，
你这个代码跟我的要求唯一缺的就是当1被选择时，23也要同时被选择。这一点。
还有个问题，就是实际操作过程中，after还会被添加很多项，就是下面还会添加其他项目，我看代码中用last标记可以吗？如果这样的话，用什么标记每个选项？
非常感谢您这么耐心。