我想实现这样的功能:当左侧的checkbox勾选后,同一行中右侧的checkbox全选,注意,是同一行的!不是同一行的不全选。
是这样的,我做了一个table,第一列(左侧)显示的是应用组的名称,第二列(右侧)显示的是子应用的名称,这些都是从数据库中取出来通过迭代器来实现的,代码如下:
求大神帮忙写一JS方法实现这个功能!!!(我自己代码中的这个js方法不对)
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../../css/styles.css" />
<script type="text/javascript" src="../../../js/jquery.js"></script><title>Insert title here</title>
</head><script type="text/javascript">

  function checkAll(obj,id){
 
     var check = document.getElementsByName(id);
     for(i=0; i<check.length; i++){     
     check[i].checked = obj.checked;     
     }      
}</script>
 
 
<body>
<s:action name="findAppList" executeResult="false" var="list"/>
<div align="center">
<s:form action="setRoleApp" method="post" name="myForm" >
<s:hidden name="roleId"/>

<table class="tab_head" width="85%">
<tr>
<td>
<img src="../../../images/folder.png" />
所有应用权限
</td>
</tr>
</table>
<table class="tab_frm" width="85%">
<s:iterator value="#list.appGroupList" id="appGroupList" var="c">
<tr>
<td class="left">  
  <input type="checkbox" name="cdmAppGroup.appGroupId" id="appGroup" value="<s:property value="%{#c['appGroupId']}"/>" onclick="checkAll(this, 'appId')" >
  <s:property value="%{#c['appGroupName']}"/>
  <br/>  
</td>
<td>

<s:iterator value="#list.appList" id="appList" var="k">
<s:if test="#k.cdmApplicationGroup.appGroupId == #c.appGroupId">
<input type="checkbox" name="appId" id="appIds" value="<s:property value="%{#k['appId']}"/>">
<s:property value="%{#k['appNameCh']}"/>
&nbsp
</s:if>
</s:iterator>
</td>
</tr>
</s:iterator>
<tr>
<td colspan="2">
<div align="center">
<s:submit value="确定" theme="simple" cssClass="btn_normal" />
</div>
</td>
</tr>
</table>
</s:form>
</div>
</body>
</html>

解决方案 »

  1.   

    这个如果使用jquery超级简单的。
      

  2.   

    将复选框的id追加当前的行数值。
    其他的在做选择的时候,id值只有同一行的相同,自然不会勾选其他的复选框了。
      

  3.   

    给同一行的Name给一样的名字,用name获取对象,不要用Id获取
      

  4.   

    你既然已经引入了jquery插件,那么保证同一行全选的关键在于如何选取同一行的所有checkbox的问题。如下你参考。/* 彈出窗口全選按鈕 */
    $("#allMenuCheckedBtn").click(function() 
    {

    for (i=0; i<=99; i=i+1)
    {
         var a='menuItemCheckListDiv input:checkbox.chk';
         a+=i;
    $('#'+a).each(function()


    $(this).attr('checked', true);
            });
    }
    });