<form name=form1 onsubmit="check();">
<input type=checkbox name="mm1" value='1' onclick="cbclick(this);">用户管理<br>
<input type=checkbox name="mm1" value='11' onclick="cbclick2(this);">添加<br>
<input type=checkbox name="mm1" value='12' onclick="cbclick2(this);">修改<br>
<input type=checkbox name="mm1" value='13' onclick="cbclick2(this);">删除<br><br>
<input type=checkbox name="mm2" value='2' onclick="cbclick(this);">角色管理<br>
<input type=checkbox name="mm2" value='21' onclick="cbclick2(this);">添加<br>
<input type=checkbox name="mm2" value='22' onclick="cbclick2(this);">修改<br>
<input type=checkbox name="mm2" value='23' onclick="cbclick2(this);">删除<br><br>
<input type=checkbox name="mm3" value='3' onclick="cbclick(this);">权限管理<br>
<input type=checkbox name="mm3" value='31' onclick="cbclick2(this);">添加<br>
<input type=checkbox name="mm3" value='32' onclick="cbclick2(this);">修改<br>
<input type=checkbox name="mm3" value='33' onclick="cbclick2(this);">删除<br>
<input type=hidden name="result">
<input type=submit value="submit">
</form>
<script>
function cbclick(obj){
var o=document.getElementsByName(obj.name);
for(i=1;i<o.length;i++)
  o[i].checked=o[0].checked;
}
function cbclick2(obj){
var o=document.getElementsByName(obj.name);
var tag=false;
for(i=1;i<o.length;i++)
  if(o[i].checked){tag=true;break;}
o[0].checked=tag;
}
function check(){
var s="";
for(var i=0;i<document.form1.elements.length;i++)
  if(document.form1.elements[i].name.substring(0,2)=="mm"&&document.form1.elements[i].checked&&document.form1.elements[i].type=="checkbox")
     s+=document.form1.elements[i].value+",";
  if(s.length>1)s=s.substring(0,s.length-1);
alert(s);
}
</script>

解决方案 »

  1.   

    document.form1.result.value=s;
    alert(s);
    }
    </script>
      

  2.   

    <style>
    input{t:expression(this.onclick=function(){show(this)})}
    </style>
    <script>function show(obj)
    {  if(obj.id.toString().length==3)
       {
         for(var i=0;i<3;i++)
          {
            document.getElementById(obj.id+'_'+(i+1).toString()).checked=obj.checked;
          }
       }  var list='';
      var cols=document.getElementsByTagName('input');
      for(var i=0;i<cols.length;i++)
       {
         if(cols[i].checked)
           list+=(','+cols[i].value);
       }   document.getElementById('result').innerHTML='您选择了:'+list.substring(1);
    }
    </script>
    <body>
    <table>
    <tr>
    <td><input type=checkbox value=1 id=ck1>用户管理</td>
    <td><input type=checkbox value=2 id=ck2>角色管理</td>
    <td><input type=checkbox value=3 id=ck3>权限管理</td>
    </tr>
    <tr>
    <td><input type=checkbox value=11 id=ck1_1>添加</td>
    <td><input type=checkbox value=21 id=ck2_1>添加</td>
    <td><input type=checkbox value=31 id=ck3_1>添加</td>
    </tr>
    <tr>
    <td><input type=checkbox value=12 id=ck1_2>修改</td>
    <td><input type=checkbox value=22 id=ck2_2>修改</td>
    <td><input type=checkbox value=32 id=ck3_2>修改</td>
    </tr>
    <tr>
    <td><input type=checkbox value=13 id=ck1_3>删除</td>
    <td><input type=checkbox value=23 id=ck2_3>删除</td>
    <td><input type=checkbox value=33 id=ck3_3>删除</td>
    </tr>
    </table>
    <span id='result'></span>
    </body>
      

  3.   

    <html>
    <head>
    <SCRIPT language=JavaScript>
    var x0;
    var y0;
    var selectenable=0;function initChkBox(obj){
    var coll=document.forms["form1"].tags("input");
        for (i=0;i<coll.length;i++){
        if (coll.item(i).name.substr(0,2)=="ck") {
    var offsetTop = 0;
    var offsetLeft = 0;
    var objP = coll.item(i);
    while (objP.tagName!="BODY"&&objP){
    offsetTop += objP.offsetTop;
    offsetLeft += objP.offsetLeft;
    objP = objP.offsetParent;
    }
    coll.item(i).X=offsetLeft+10;
    coll.item(i).Y=offsetTop+10;
    //alert(coll.item(i).X+","+coll.item(i).Y+","+coll.item(i).offsetHeight);
    }
    }
    }function initselect() {
           if (window.event.srcElement.tagName=="BODY") {
           window.event.returnValue = true;
           return;
           }
       
            x0=document.body.scrollLeft+event.clientX;
        y0=document.body.scrollTop+event.clientY;
    selectarea.setCapture();
        selectenable=1;
    }
    function startselect() {
        if (selectenable==1) {
            selectarea.style.visibility='visible';

            if(document.body.scrollLeft+event.clientX-x0>0) {
        selectarea.style.left=x0;
        selectarea.style.width=document.body.scrollLeft+event.clientX-x0;
      }
            else{
        selectarea.style.left=document.body.scrollLeft+event.clientX;
        selectarea.style.width=x0-(document.body.scrollLeft+event.clientX);
       }
            if (document.body.scrollTop+event.clientY-y0>0) {
       selectarea.style.top=y0;
       selectarea.style.height=document.body.scrollTop+event.clientY-y0;
       }
           else{
       selectarea.style.top=document.body.scrollTop+event.clientY;
       selectarea.style.height=y0-(document.body.scrollTop+event.clientY);
       }
    }
        window.event.returnValue = true;
    }function endselect() {
    if (selectenable==0) return false;
        selectenable=0;
    selectarea.style.visibility='hidden';
    selectarea.releaseCapture();
    document.onmousemove=null;
    var coll=document.forms["form1"].tags("input");
        for (i=0;i<coll.length;i++){
        if (coll.item(i).name.substr(0,2)=="ck") {
    /* if (((coll.item(i).X>selectarea.offsetLeft)&&(coll.item(i).X<selectarea.offsetLeft+selectarea.offsetWidth))&&((coll.item(i).Y>selectarea.offsetTop)&&(coll.item(i).Y<selectarea.offsetTop+selectarea.offsetHeight))){
    coll.item(i).checked=!coll.item(i).checked;}
    */
    if (coll.item(i).X>selectarea.offsetLeft)
    if (coll.item(i).X<selectarea.offsetLeft+selectarea.offsetWidth) 
    if (coll.item(i).Y>selectarea.offsetTop)
    if (coll.item(i).Y<selectarea.offsetTop+selectarea.offsetHeight)
    coll.item(i).checked=!coll.item(i).checked
    }
    }
    selectarea.style.pixelHeight=0;
    selectarea.style.pixelWidth=0;
    }/*function hideselect() {
        //if (document.body.scrollLeft+event.clientX==x0 && document.body.scrollTop+event.clientY==y0 && event.srcElement!=selectarea)
        selectarea.style.visibility='hidden';
    }*/
    function checkAll(){
      document.form1.allsel.checked=false;
      var coll=document.forms["form1"].tags("input");
        for (i=0;i<coll.length;i++){
        if (coll.item(i).name.substr(0,2)=="ck") {
        coll.item(i).checked=false;
     }
    }
    }
    function change(v){
      var f = document.forms["form1"];
      for (i=0;i<f.elements.length;i++)
        if (f.elements[i].name.substr(0,2)=="ck") f.elements[i].checked = v;
    }
    </SCRIPT>
     
    <script language=javascript>
    function switchstatus(obj)
    {for(i=1;i<=3;i++)
     {var t="TEST"+i;
      if(obj==t)
        {if(document.getElementById(t).style.display=="block")
          {document.getElementById(t).style.display="none"}
         else
          {document.getElementById(t).style.display="block"}
        }
      else
        {document.getElementById(t).style.display="none"}
     }
    }
    </script></head>
    <body onmousedown="initselect()" onmousemove=startselect() onmouseup=endselect() onselectstart="return false;" onLoad=initChkBox()>
    <table width="100%" height="100%" cellpadding="0" cellspacing="0" bgcolor="efefef">
    <tr><td>
      <DIV id=selectarea style="border:1px dashed black;HEIGHT: 42px; LEFT: 0px; POSITION: absolute; TOP: 0px; VISIBILITY: hidden; WIDTH: 67px; Z-INDEX: 10"> 
        <img src="null" height="1" width="1"> </DIV>
      <div id="Layer1" style="position:absolute; left:256px; top:39px; width:203px; height:401px; z-index:1"> 
        <form name="form1" action="">
          <table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#339999">
            <tr><td onClick="javascript:switchstatus('TEST1')" bgcolor="#efefef">机构定义1</td><td bgcolor="#efefef"><input type="checkbox" name="allsel" value="checkbox" onclick="change(this.checked)"></td></tr>
              <tbody id="TEST1" style="DISPLAY: none">
              <tr><td bgcolor="#efefef" colspan="2">
                 增加<input type="checkbox" name="ck1" value="checkbox">
              </td></tr>
              <tr><td bgcolor="#efefef" colspan="2">   
                 删除<input type="checkbox" name="ck2" value="checkbox">
              </td></tr>
              <tr><td bgcolor="#efefef" colspan="2">   
                 修改<input type="checkbox" name="ck3" value="checkbox">
              </td></tr>
              </tbody>
            </tr>
          </table>
          
          <button onClick="checkAll()">清空</button>
        </form>
      </div>
    </td></tr>  
    </table>
    </body>
    </html>