Question

求javascript checkbox 选中事件代码，应该怎样才能实现？

<table width="500px" cellpadding="0" cellspacing="1" class="pricebox">
<tbody><tr style="border-bottom: 2px solid #ccc;">
<th><img alt="" src="./222222222222222_files/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="3082*过油*4">  过油</span><div class="value"><input type="text" name="过油长" style="width:40px;"> X <input type="text" name="过油宽" style="width:40px;"> MM</div></li><li><span><input name="after" type="checkbox" value="3083*uv*4">  uv</span><div class="value"><input type="text" name="uv长" style="width:40px;"> X <input type="text" name="uv宽" style="width:40px;"> MM</div></li><li><span><input name="after" type="checkbox" value="3087*烫银*4">  烫银</span><div class="value"><input type="text" name="烫银长" style="width:40px;"> X <input type="text" name="烫银宽" style="width:40px;"> MM</div></li><li><span><input name="after" type="checkbox" value="3144*锁线*0">  锁线</span><div class="value">锁线</div></li><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>
</ul>
</td>
</tr>
</tbody></table>
假设7个复选按钮分别为1234567，123不用管，我想让4567实现如下效果。
当4被选中或者被取消选中时，56都随之选择和取消。
当7被选中或者取消时，456都随之选中或取消。
当5或6被选中或者取消时，4也随之被选中或者取消。

补充一下，这些数据都是变动的，比如，我后台操作添加一个新的后道工序，或者我改变现有的1234567这些后道的某个参数，那在网页中的排序就会变化。因为我们要求制作方改动的话，需要加钱，而且他们实现不实现还不一定。
所以想请高手帮忙参谋一下。为了达到要求，最好的途径是什么？感谢。

因为每个checkbox都对应的是一个value，value里面的数字都不一样，这个数字有什么用？我们用js实现上面那些要求的时候能不能利用value？怎么利用呢？

Answer 1

先吐槽，你应该把问题描述写在前面，然后才是代码，否则别人看到你乱七八糟的代码就心烦不想回复。而且代码最好能套上个代码格式。
最后，你问题那么多，你给的分好少。
1、先从 value 的问题回复，checkbox 的 value 会在你的表单提交的时候，将 value 的数据提交到服务器。也就是你的工序内容会被提交到服务器。
2、基于你的补充，工序中的排序是可变的，且你的工序数目和种类是可变的，而你的取消与选中的需求，不是针对固定的某几个按钮，而是某几个不同的工序，这样是极难操作的。同时你未告知你到底有多少个工序。

你们的需求百分百能实现（如果不能就是对方能力问题），但是需要投入比较大的功夫，对方要求加钱也是情理之中（说白了对方就是要你加钱才给你干）。
你现在提供的是一份前台的代码，而非后台的代码，即便此处能给出你当前需求的解决方法（仅限你现在所提供的代码），也没有太大的帮助。

追问

分值先提高下。

后面说的这个我也有心理准备，话说，为了让前台通过js能实现我说的东西，是不是得把相应的几道工序固定一下代码？或者说，把每道工序的name固定一下，变成唯一的，是不是就好实现了？
它们的value值后面，有一个类似3087、3141、3142，这个貌似就是顺延的，根据后台创建后道工序的顺序依次增加的。如果这道工序不删除，这个数值貌似是不会改变的，这个能用到吗？

追答

假如工序的排序是固定，且有唯一的name或ID，这就非常好实现你的需求。

因为你的某个几个工序是唯一的，可以非常方便的判断这个工序是否被选中。

另外，对于你的 value ，只要是可变的想要利用就比较困难。
只要前面的两个条件满足其中一个（最好是后者），就能轻易满足你的需求。

追问

分值再提高。
那就按照你的思路写一下代码，实现我要想的，然后我提供给网站制作者让他修改，这样可以吧？
因为他生成的每个工序的name都是after，具体他怎么弄的，你可能知道一些，我应该怎么跟他说如何改动？
我们后台操作就是可以添加删除后道工序，然后value的数字*工序名可能就会改变，如果我们只修改参数不重新删除添加的话，这个value是不变的。只用value能实现吗？

追答

工序的name显然是在添加时统一分配的，假如可固定name或者固定ID，你的需求对于网站作者来说是小菜一碟了。

正因为没有固定的那么或ID，value中的数值也是可变的，才使得问题变得麻烦。

假如你的工序上，锁线、上胶封皮、折页配页等工序在整个流程中仅出现一次，可以通过模糊判断这个value中是否存在。

下面以你截图中的代码及你假设的需求提供一份样本。

由于该方法是检测value的内容，因此每次当你选中或取消时，都会检查一次所有的工序。

由于字数限制，仅提供JavaScript代码，HTML部分请自己补充

<script>
var items_list=document.getElementsByName('after');
for(i in items_list)
{
items_list[i].addEventListener('click',function(){
if(/锁线/.test(this.value)){
for(i in items_list){
if(/(胶装|上胶封皮)/.test(items_list[i].value)){
items_list[i].checked=this.checked;
}
}
}
if(/折页配页/.test(this.value)){
for(i in items_list){
if(/(胶装|上胶封皮|折页配页)/.test(items_list[i].value)){
items_list[i].checked=this.checked;
}
}
}
if(/胶装|上胶封皮/.test(this.value)){
for(i in items_list){
if(/(锁线)/.test(items_list[i].value)){
items_list[i].checked=this.checked;
}
}
}
})
}
</script>

追问

赞一个！最后一个if那里，加上改成“锁线|上胶封皮|胶装”，就完全实现了。
感谢，这个代码最管用了，最重要的是修改也方便，不用改变name。

追答

前提是你的value不要有同名的冲突，而且论效率，远不如直接操作name或ID
当然，如果你的工序也就只有几个，效率问题其实并不重要