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

来源：互联网发布：2017年太阳黑子数据编辑：程序博客网时间：2024/04/19 09:56

完成效果图：

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

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及之后的可选状态。

0 0