为 checkbox 添加事件，使选中和非选中时改变其他几个checkbox的可选状态

完成效果图：



当选中“会议介绍”选中时，“会议简介” 和“会议议程” 才可选， “合作”及其后面的菜单同理。

js代码：

$('input').click(function(){
var className=$(this).attr('class');
var cols=getClass('input',className);
if(!cols[0].checked){
for(var i=1;i<cols.length;i++){
cols[i].checked=false;
cols[i].disabled="disabled";
}
}else if(cols[0].checked){
for(var i=1;i<cols.length;i++){
cols[i].disabled="";
}
}
});

因为有的浏览器不支持getElementsByClassName方法，在网上找的解决方法：

function getClass(tagname, className) { //tagname指元素，className指class的值
//判断浏览器是否支持getElementsByClassName，如果支持就直接的用
if (document.getElementsByClassName) {
return document.getElementsByClassName(className);
}
else {    //当浏览器不支持getElementsByClassName的时候用下面的方法
var tagname = document.getElementsByTagName(tagname);  //获取指定元素
var tagnameAll = [];     //这个数组用于存储所有符合条件的元素
for (var i = 0; i < tagname.length; i++) {     //遍历获得的元素
if (tagname[i].className == className) {     //如果获得的元素中的class的值等于指定的类名，就赋值给tagnameAll
tagnameAll[tagnameAll.length] = tagname[i];
}
}
return tagnameAll;
}
}

colOneList 是后台传来的存有实体的List

<c:forEach items="${colOneList}" var="one">
<tr><th><input type="checkbox" id="checkcol" name="ones" class="${one.id}" value="${one.id}"/>${one.columnName}</th>

<td><c:forEach items="${one.twocolumns}" var="two">
<input type="checkbox" name="twos" class="${one.id}" value="${two.id}"/>${two.columnName}
</c:forEach>
</td>
</tr>
</c:forEach>

完成想法是，用实体id来标示checkbox 的class，当所有class相同的checkbox中的第一个元素点击时，判断是选中还是非选中，依此更改class相同的第二个checkbox及之后的可选状态。