一个checkbox的故事。。

<form name=hrong>
<input type=checkbox name=All onclick="checkAll('mm')">全选<br><br>
<input type=checkbox name=mm onclick="checkItem()"><br>
<input type=checkbox name=mm onclick="checkItem()"><br>
<input type=checkbox name=mm onclick="checkItem()"><br>
<input type=checkbox name=mm onclick="checkItem()"><br>
<input type=checkbox name=mm onclick="checkItem()"><br>
<input type=checkbox name=mm onclick="checkItem()"><br>
<input type=checkbox name=mm onclick="checkItem()"><br>
<input type=checkbox name=mm onclick="checkItem()"><br>
<input type=checkbox name=mm onclick="checkItem()"><br></form><SCRIPT LANGUAGE="JavaScript">
function checkAll(str)
{
  var a = document.getElementsByName(str);
  var n = a.length;
  for (var i=0; i<n; i++)
  a[i].checked = window.event.srcElement.checked;
}
function checkItem()
{
  var e = window.event.srcElement;
  if (e.checked)
  {
    var a = document.getElementsByName(e.name);
    document.hrong.All.checked = true;
    for (var i=0; i<a.length; i++)
    {
    if (!a[i].checked){ document.hrong.All.checked = false; break; alert()}
    }
  }
  else document.hrong.All.checked = false;
}
</SCRIPT>

解决方案 »

  1.   

    不好意思, 上面代码里多了一句测试的语句, 拿掉就可以了:
    <form name=hrong>
    <input type=checkbox name=All onclick="checkAll('mm')">全选<br><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br>
    <input type=checkbox name=mm onclick="checkItem()"><br></form><SCRIPT LANGUAGE="JavaScript">
    function checkAll(str)
    {
      var a = document.getElementsByName(str);
      var n = a.length;
      for (var i=0; i<n; i++)
      a[i].checked = window.event.srcElement.checked;
    }
    function checkItem()
    {
      var e = window.event.srcElement;
      if (e.checked)
      {
        var a = document.getElementsByName(e.name);
        document.hrong.All.checked = true;
        for (var i=0; i<a.length; i++)
        {
          if (!a[i].checked){ document.hrong.All.checked = false; break;}
        }
      }
      else document.hrong.All.checked = false;
    }
    </SCRIPT>
      

  2.   

    <html>
    <script>
    function aa()
    {
      var a=document.getElementsByName("qr")
      if(f1.a.checked){
        for(i=0;i<a.length;i++)
        {
         a[i].checked=true
        }
      }
      else
      {
        for(i=0;i<a.length;i++)
        {
         a[i].checked=false
        }
      }
    }
    function all_sel()
    {
      var a=document.getElementsByName("aa")
      for(i=0;i<a.length;i++)
        {
         a[i].checked=true
        }
    }
    </script><body><form name="f1" method="POST" action="">
      
      <p><input type="checkbox" name="aa" value="ON" onclick="aa()">亲人</p>
      <p>&nbsp;&nbsp; <input type="checkbox" name="qr" value="ON" onclick="a.checked=false"> 父亲</p>              
      <p>&nbsp;&nbsp; <input type="checkbox" name="qr" value="ON"> 母亲</p>              
      <p>&nbsp;&nbsp; <input type="checkbox" name="qr" value="ON"> 儿子</p>              
      <p><input type="checkbox" name="aa" value="ON">朋友</p>
      <p><input type="checkbox" name="aa" value="ON">同学</p>
      <p><input type="checkbox" name="aa" value="ON">同事</p>
      
     
      <p><input type="button" value="all selected" onclick="all_sel()">　</p>
    </form></body></html>
      

  3.   

    在多组中的用户选框中选掉那对应的组会有反应吗？  下面是改进版:<form name=hrong>
    <input type=checkbox name=All onclick="checkAll('mm')">全选<br>
    <input type=checkbox name=mm onclick="checkItem('All')"><br>
    <input type=checkbox name=mm onclick="checkItem('All')"><br>
    <input type=checkbox name=mm onclick="checkItem('All')"><br>
    <input type=checkbox name=mm onclick="checkItem('All')"><br>
    <input type=checkbox name=mm onclick="checkItem('All')"><br><br>
    <input type=checkbox name=All2 onclick="checkAll('mm2')">全选<br>
    <input type=checkbox name=mm2 onclick="checkItem('All2')"><br>
    <input type=checkbox name=mm2 onclick="checkItem('All2')"><br>
    <input type=checkbox name=mm2 onclick="checkItem('All2')"><br>
    <input type=checkbox name=mm2 onclick="checkItem('All2')"><br>
    <input type=checkbox name=mm2 onclick="checkItem('All2')"><br></form><SCRIPT LANGUAGE="JavaScript">
    function checkAll(str)
    {
      var a = document.getElementsByName(str);
      var n = a.length;
      for (var i=0; i<n; i++)
      a[i].checked = window.event.srcElement.checked;
    }
    function checkItem(str)
    {
      var e = window.event.srcElement;
      var all = eval("document.hrong."+ str);
      if (e.checked)
      {
        var a = document.getElementsByName(e.name);
        all.checked = true;
        for (var i=0; i<a.length; i++)
        {
          if (!a[i].checked){ all.checked = false; break;}
        }
      }
      else all.checked = false;
    }
    </SCRIPT>
      

  4.   

    我个人认为你没有必要对组进行操作，你只操作人就行了。我给你个我自己写的类似的例子。如果还有问题，我抽空帮你搞。<form name="form1">
    <table width="95%" border="1" align="center" cellpadding="1" cellspacing="0" borderColorLight="#000000" borderColorDark="#FFFFFF" style="font:9pt;">
    <tr> 
          <td width="60" align="center"  bgcolor="#D0DFFF">发送用户</td>
          <td>系统管理员</td>
        </tr>
        <tr> 
          <td align="center"  bgcolor="#D0DFFF" class="font9pt">接收用户</td>
          <td> 
            <table border="0" cellspacing="0" cellpadding="0">
              <tr align="center"> 
                <td> <select name="list1" size="14" style="WIDTH: 200px" ondblClick="InsertItem();" multiple>
    <option id="0_101" value="D'101">有限公司</option>
    <option id="0_101_102" value="D'102">　　高阶管理层</option>
    <option id="0_101_102_1003" value="U'1003">　　　　王新</option>
    <option id="0_101_102_1004" value="U'1004">　　　　钱贤</option>
    <option id="0_101_102_1005" value="U'1005">　　　　唐双</option>
    <option id="0_101_105" value="D'105">　　技术质量部</option>
    <option id="0_101_105_107" value="D'107">　　　　质量科</option>
    <option id="0_101_105_107_1045" value="U'1045">　　　　　　杨刚</option>
    <option id="0_101_105_107_1071" value="U'1071">　　　　　　杨林坤</option>
    <option id="0_101_105_108" value="D'108">　　　　技术科</option>
    <option id="0_101_105_108_1082" value="U'1082">　　　　　　唐毅</option>
    <option id="0_101_105_108_1084" value="U'1084">　　　　　　汪红</option>
    <option id="0_101_105_108_1094" value="U'1094">　　　　　　刘佳</option>
    <option id="0_101_105_109" value="D'109">　　　　监督科</option>
    <option id="0_101_105_109_1098" value="U'1098">　　　　　　戴冬峰</option>
    <option id="0_101_105_109_1099" value="U'1099">　　　　　　李颜</option>
    <option id="0_101_105_109_1131" value="U'1131">　　　　　　杨辉</option>
    <option id="0_101_106" value="D'106">　　生产部</option>
    </select> </td>
                <td align="center" valign="middle"><input type="button" class="buttonface" onClick="InsertItem();" value=" >> "></td>
                <td><select name="list2" size="14" style="WIDTH: 200px" ondblClick="DeleteItem();" multiple></select></td>
              <td align="center"><p><input type="button" class="buttonface" onClick="DeleteItem();" value="删除"></p><p><input type="button" class="buttonface" onClick="ClearItem();" value="清空"></p></td>
      </tr>
            </table>
    </form>
    <script language="JavaScript">
    <!--
    var MyFrom=form1.list1;
    var MyTo=form1.list2;function InsertItem(){//增加
    for(var j=0;j<MyFrom.length;j++){
    if(MyFrom.options[j].selected){
    var LengthSelf=MyFrom.options[j].id.length;
    var StringSelf=MyFrom.options[j].id; for(var i=0;i<MyFrom.length;i++){
    var StringParent=MyFrom.options[i].id.substring(0,LengthSelf);
    if(StringSelf.indexOf(StringParent)!=-1||StringParent==StringSelf){//增加父或者子
    var MyOption=document.createElement("option");
    //MyOption.index="";//该项目是自动产生的，无法赋值！
    MyOption.id=MyFrom.options[i].id;
    MyOption.text=MyFrom.options[i].text;
    MyOption.value=MyFrom.options[i].value;
    MyTo.options.add(MyOption);
    }
    }
    }
    }
    FilterSortOption();
    Process_Style(MyTo);
    }function DeleteItem(){//删除
    FlagHaveDelete=false;
    for(var j=0;j<MyTo.length;j++){
    if(MyTo.options[j].selected){
    var LengthSelf=MyTo.options[j].id.length;
    var StringSelf=MyTo.options[j].id;

    for(var i=0;i<MyTo.length;i++){
    var StringParent=MyTo.options[i].id.substring(0,LengthSelf);
    if(MyTo.options[i].id.length>=LengthSelf&&StringSelf==StringParent){//删除己及子
    FlagHaveDelete=true;
    MyTo.options[i]=null;
    i--;
    }
    }
    if(FlagHaveDelete){
    j--;
    }
    }
    }
    if(FlagHaveDelete){
    DeleteNoSon(MyTo);
    }
    }function DeleteNoSon(varForm){//删除无子的部门
    for(var i=0;i<varForm.length;i++){
    if((!HaveSon(varForm,varForm.options[i].id))&&(varForm.options[i].value.substring(0,1)=="D")){
    varForm.options[i]=null;
    //i--;
    DeleteNoSon(varForm);
    }
    }
    }function HaveSon(varForm,varParentId){//判断是否有子 for(var i=0;i<varForm.length;i++){
    if(varForm.options[i].id.length>varParentId.length&&varForm.options[i].id.indexOf(varParentId)!=-1){
    return true;
    }
    }
    return false;
    }function ClearItem(){//全部清除
    MyTo.length=0;
    }function Process_Style(varMyObject){//处理颜色
    for(var i=0;i<varMyObject.options.length;i++){//处理颜色
    var temp=varMyObject.options[i].value.substring(0,1);
    if(temp=="D"){
    varMyObject.options[i].style.color="green";
    }else{
    varMyObject.options[i].style.color="blue";
    }
    }
    }function FilterSortOption(){//过滤、排序
    var MyArrayId=new Array();
    for(var i=0;i<MyTo.options.length;i++){
    MyArrayId[i]=MyTo[i].id;
    }

    MyArrayId.sort();
    for(var i=0;i<MyArrayId.length-1;i++){
    if(MyArrayId[i]==MyArrayId[i+1]){
    MyArrayId[i]=null;
    }
    }
    var MyArrayIdNew=new Array();
    for(var i=0,j=0;i<MyArrayId.length;i++){
    if(MyArrayId[i]){
    MyArrayIdNew[j++]=MyArrayId[i];
    }
    }

    MyTo.length=0;
    for(var i=0;i<MyArrayIdNew.length;i++){
    var MyOption=document.createElement("option");
    var tmp=document.getElementById(""+MyArrayIdNew[i]+"");
    MyOption.id=tmp.id;
    MyOption.text=tmp.text;
    MyOption.value=tmp.value;
    MyTo.options.add(MyOption);
    }
    }
    -->
    </script>
      

  5.   

    针对checkbox的应该比这个还简单。
      

  6.   

    laosan(老三) 做的很好噢，如果能给合数据库就好了，还有就是我在提交时怎么去取值？