分组checkbox怎么样取值并实现排序？


如下的用户分成三组，现需要在这些用户中做选择，并将结果存入frmnamelist容器中，具体要求：
1、可以分组选择，并将选择的结果送到frmnamelist，这些结果即时排序；
2、可以修改选择，并将结果从frmnamelist中剔除；
3、可以按用户选择或取消，保持frmnamelist中的结果正确；
4、不影响选择方式与选择的先后顺序……
javascript怎么实现这个功能，请求支招，无比感谢！
<div>
   <input type="checkbox" name="checkall1" id="checkall1" onclick="CheckAll('frmname1','checkall1')" />全选用户组1</div>
     <div class="Q_left_content">
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户1" />用户1
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户2" />用户2
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户3" />用户3
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户4" />用户4
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户5" />用户5
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户6" />用户6
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户7" />用户7
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户8" />用户8
      <input type="checkbox" name="frmname1" onclick="CheckThis('frmname1');" value="用户9" />用户9
    </div>
   <input type="checkbox" name="checkall2" id="checkall2" onclick="CheckAll('frmname2','checkall2')" />全选用户组2</div>
    <div class="Q_left_content">
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户10" />用户10
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户11" />用户11
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户12" />用户12
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户13" />用户13
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户14" />用户14
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户15" />用户15
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户16" />用户16
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户17" />用户17
      <input type="checkbox" name="frmname2" onclick="CheckThis('frmname2');" value="用户18" />用户18
    </div>
   <input type="checkbox" name="checkall3" id="checkall3" onclick="CheckAll('frmname3','checkall3')" />全选用户组3</div>
    <div class="Q_left_content">
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户19" />用户19
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户20" />用户20
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户21" />用户21
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户22" />用户22
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户23" />用户23
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户24" />用户24
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户25" />用户25
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户26" />用户26
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户27" />用户27
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户28" />用户28
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户29" />用户29
      <input type="checkbox" name="frmname3" onclick="CheckThis('frmname3');" value="用户30" />用户30
    </div>
</div>
<div>已经被选中的好友</div>
<div id="frmnamelist"></div>

解决方案 »

  1.   

    思路：
    选中的放进数组，排序后放到<div id="frmnamelist"> 里面
      

  2.   

    谢谢caiying2009，全选还是容易，就是修改老是不得要领，可以try么？
      

  3.   

    <div id="frmnamelist"> 里面"分组"吗？
      

  4.   

    try:<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body>
    <script language="javascript">
    <!--
    function cha(){
    var objDiv=document.getElementById("frmname").getElementsByTagName("div")
    var checkArray=[]
    for (var i=0;i<objDiv.length;i++){
    var objInp=objDiv[i].getElementsByTagName("input")
    for (var j=0;j<objInp.length;j++){
    if (objInp[j].type=="checkbox" && objInp[j].name.indexOf("frmname")!=-1 && objInp[j].checked){
    checkArray[checkArray.length]=objInp[j].value
    }
    }
    }
    var str=""
    for (var i=0;i<checkArray.length;i++){
    str+=checkArray[i]+"   "
    }
    document.getElementById("frmnamelist").innerHTML=str
    }
    onload=function(){
    var obj=document.getElementById("frmname").getElementsByTagName("input");
    for (var i=0;i<obj.length;i++){
    if (obj[i].type=="checkbox"){
    if(obj[i].name.indexOf("checkall")!=-1)
    obj[i].onclick=function(){
    CheckAll("frmname"+this.name.split("checkall")[1],this)
    }
    if (obj[i].name.indexOf("frmname")!=-1)
    obj[i].onclick=function(){
    CheckThis(this)
    }
    }
    }
    }function CheckAll(_frmname,_this){
    var obj=document.getElementById("frmname").getElementsByTagName("input");
    for (var i=0;i<obj.length;i++)
    if (obj[i].type=="checkbox" && obj[i].name==_frmname)
    obj[i].checked=_this.checked
    cha()
    }function CheckThis(_this){
    cha()
    }//-->
    </script>
    <div id=frmname> 
    <div> 
      <input type="checkbox" name="checkall1" id="checkall1" onclick="CheckAll('frmname1',this)" />全选用户组1 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname1" value="用户1" />用户1 
          <input type="checkbox" name="frmname1" value="用户2" />用户2 
          <input type="checkbox" name="frmname1" value="用户3" />用户3 
          <input type="checkbox" name="frmname1" value="用户4" />用户4 
          <input type="checkbox" name="frmname1" value="用户5" />用户5 
          <input type="checkbox" name="frmname1" value="用户6" />用户6 
          <input type="checkbox" name="frmname1" value="用户7" />用户7 
          <input type="checkbox" name="frmname1" value="用户8" />用户8 
          <input type="checkbox" name="frmname1" value="用户9" />用户9 </div><br>
    <div> 
        <input type="checkbox" name="checkall2" id="checkall2" onclick="CheckAll('frmname2',this)" />全选用户组2 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname2" value="用户10" />用户10 
          <input type="checkbox" name="frmname2" value="用户11" />用户11 
          <input type="checkbox" name="frmname2" value="用户12" />用户12 
          <input type="checkbox" name="frmname2" value="用户13" />用户13 
          <input type="checkbox" name="frmname2" value="用户14" />用户14 
          <input type="checkbox" name="frmname2" value="用户15" />用户15 
          <input type="checkbox" name="frmname2" value="用户16" />用户16 
          <input type="checkbox" name="frmname2" value="用户17" />用户17 
          <input type="checkbox" name="frmname2" value="用户18" />用户18 </div><br>
    <div> 
        <input type="checkbox" name="checkall3" id="checkall3" onclick="CheckAll('frmname3',this)" />全选用户组3 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname3" value="用户19" />用户19 
          <input type="checkbox" name="frmname3" value="用户20" />用户20 
          <input type="checkbox" name="frmname3" value="用户21" />用户21 
          <input type="checkbox" name="frmname3" value="用户22" />用户22 
          <input type="checkbox" name="frmname3" value="用户23" />用户23 
          <input type="checkbox" name="frmname3" value="用户24" />用户24 
          <input type="checkbox" name="frmname3" value="用户25" />用户25 
          <input type="checkbox" name="frmname3" value="用户26" />用户26 
          <input type="checkbox" name="frmname3" value="用户27" />用户27 
          <input type="checkbox" name="frmname3" value="用户28" />用户28 
          <input type="checkbox" name="frmname3" value="用户29" />用户29 
          <input type="checkbox" name="frmname3" value="用户30" />用户30 
        </div><br> 
    </div> <div>已经被选中的好友 </div> 
    <div id="frmnamelist" style="border:1px red solid"> </div>
    </body></html>
      

  5.   

    非常感谢caiying2009的帮助，问题很好滴解决了，正是我想要的效果，学习了。若没有更好的方法，明天结贴，呵呵^_^
      

  6.   

    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body>
    <script language="javascript">
    <!-- String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
    }
    Array.prototype.popByVal = function(val) {
    for(var i = 0 ; i < this.length ; i++) {
    if(this[i] == val){
    if(this.length - 1 == i) this.pop();
    else{
    var temp = this[i];
    this[i] = this[this.length -1];
    this[this.length -1]  = temp ;
    this.pop();
    }
    }else continue;
    }
    }

    Array.prototype.isExist = function(val) {
    var flag = false;
    for(var i = 0 ; i < this.length ; i++) {
    if(this[i] == val){
    flag = true;
    break;
    }
    }
    return flag;
    }


    var selBox = [];

    var CheckAll = function(groupName,obj) {
    var gboxs = document.getElementsByName(groupName);
    for(var i = 0 ; i< gboxs.length ; i++){
    gboxs[i].checked =(obj.checked)? "checked":"";
    if(gboxs[i].checked && !selBox.isExist(gboxs[i].value.trim())) {
    selBox.push(gboxs[i].value.trim());
    }else if(!gboxs[i].checked ){
    selBox.popByVal(gboxs[i].value.trim());
    }
    showSelected(selBox);
    }

    }

    var $ = function(id) {return document.getElementById(id);}

    window.onload = function() {

    var boxes = document.getElementsByTagName("INPUT");
    for(var i = 0 ; i < boxes.length ; i++) {
    if(boxes[i].type == "checkbox" && boxes[i].value != "on") {
    boxes[i].onclick = function() {
    if(this.checked && !selBox.isExist(this.value.trim())) {
    selBox.push(this.value.trim());
    }else if(!this.checked){
    selBox.popByVal(this.value.trim());
    }
    showSelected(selBox);
    };
    }
    }
    }

    var showSelected = function(arr) {
    var o = $("frmnamelist");
    arr.sort();
    o.innerText = arr.join(",");
    }
    //-->
    </script>
    <div id=frmname > 
        <div> 
          <input type="checkbox" name="checkall1" id="checkall1" onclick="CheckAll('frmname1',this)" />全选用户组1 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname1" value="用户1" />用户1 
          <input type="checkbox" name="frmname1" value="用户2" />用户2 
          <input type="checkbox" name="frmname1" value="用户3" />用户3 
          <input type="checkbox" name="frmname1" value="用户4" />用户4 
          <input type="checkbox" name="frmname1" value="用户5" />用户5 
          <input type="checkbox" name="frmname1" value="用户6" />用户6 
          <input type="checkbox" name="frmname1" value="用户7" />用户7 
          <input type="checkbox" name="frmname1" value="用户8" />用户8 
          <input type="checkbox" name="frmname1" value="用户9" />用户9 </div><br>
        <div> 
            <input type="checkbox" name="checkall2" id="checkall2" onclick="CheckAll('frmname2',this)" />全选用户组2 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname2" value="用户10" />用户10 
          <input type="checkbox" name="frmname2" value="用户11" />用户11 
          <input type="checkbox" name="frmname2" value="用户12" />用户12 
          <input type="checkbox" name="frmname2" value="用户13" />用户13 
          <input type="checkbox" name="frmname2" value="用户14" />用户14 
          <input type="checkbox" name="frmname2" value="用户15" />用户15 
          <input type="checkbox" name="frmname2" value="用户16" />用户16 
          <input type="checkbox" name="frmname2" value="用户17" />用户17 
          <input type="checkbox" name="frmname2" value="用户18" />用户18 </div><br>
        <div> 
            <input type="checkbox" name="checkall3" id="checkall3" onclick="CheckAll('frmname3',this)" />全选用户组3 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname3" value="用户19" />用户19 
          <input type="checkbox" name="frmname3" value="用户20" />用户20 
          <input type="checkbox" name="frmname3" value="用户21" />用户21 
          <input type="checkbox" name="frmname3" value="用户22" />用户22 
          <input type="checkbox" name="frmname3" value="用户23" />用户23 
          <input type="checkbox" name="frmname3" value="用户24" />用户24 
          <input type="checkbox" name="frmname3" value="用户25" />用户25 
          <input type="checkbox" name="frmname3" value="用户26" />用户26 
          <input type="checkbox" name="frmname3" value="用户27" />用户27 
          <input type="checkbox" name="frmname3" value="用户28" />用户28 
          <input type="checkbox" name="frmname3" value="用户29" />用户29 
          <input type="checkbox" name="frmname3" value="用户30" />用户30 
        </div><br> 
    </div> <div>已经被选中的好友 </div> 
    <div id="frmnamelist" style="border:1px red solid"> </div>
    </body></html>
    ps:基本效果都有，但排序方面，我用了数组提供的sort(),在单个修改使可以，但是批量就乱了。
      

  7.   


       <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>新建网页 1</title>
    </head><body>
    <script language="javascript">
    <!-- String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
    }
    Array.prototype.popByVal = function(val) {
    for(var i = 0 ; i < this.length ; i++) {
    if(this[i] == val){
    if(this.length - 1 == i) this.pop();
    else{
    var temp = this[i];
    this[i] = this[this.length -1];
    this[this.length -1]  = temp ;
    this.pop();
    }
    }else continue;
    }
    }

    Array.prototype.isExist = function(val) {
    var flag = false;
    for(var i = 0 ; i < this.length ; i++) {
    if(this[i] == val){
    flag = true;
    break;
    }
    }
    return flag;
    }


    var selBox = [];

    var CheckAll = function(groupName,obj) {
    var gboxs = document.getElementsByName(groupName);
    for(var i = 0 ; i< gboxs.length ; i++){
    gboxs[i].checked =(obj.checked)? "checked":"";
    if(gboxs[i].checked && !selBox.isExist(gboxs[i].value.trim())) {
    selBox.push(gboxs[i].value.trim());
    }else if(!gboxs[i].checked ){
    selBox.popByVal(gboxs[i].value.trim());
    }
    showSelected(selBox);
    }

    }

    var $ = function(id) {return document.getElementById(id);}

    window.onload = function() {

    var boxes = document.getElementsByTagName("INPUT");
    for(var i = 0 ; i < boxes.length ; i++) {
    if(boxes[i].type == "checkbox" && boxes[i].value != "on") {
    boxes[i].onclick = function() {
    if(this.checked && !selBox.isExist(this.value.trim())) {
    selBox.push(this.value.trim());
    }else if(!this.checked){
    selBox.popByVal(this.value.trim());
    }
    showSelected(selBox);
    };
    }
    }
    }

    var showSelected = function(arr) {
    var o = $("frmnamelist");
    arr.sort();
    o.innerText = arr.join(",");
    }
    //-->
    </script>
    <div id=frmname > 
        <div> 
          <input type="checkbox" name="checkall1" id="checkall1" onclick="CheckAll('frmname1',this)" />全选用户组1 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname1" value="用户1" />用户1 
          <input type="checkbox" name="frmname1" value="用户2" />用户2 
          <input type="checkbox" name="frmname1" value="用户3" />用户3 
          <input type="checkbox" name="frmname1" value="用户4" />用户4 
          <input type="checkbox" name="frmname1" value="用户5" />用户5 
          <input type="checkbox" name="frmname1" value="用户6" />用户6 
          <input type="checkbox" name="frmname1" value="用户7" />用户7 
          <input type="checkbox" name="frmname1" value="用户8" />用户8 
          <input type="checkbox" name="frmname1" value="用户9" />用户9 </div><br>
        <div> 
            <input type="checkbox" name="checkall2" id="checkall2" onclick="CheckAll('frmname2',this)" />全选用户组2 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname2" value="用户10" />用户10 
          <input type="checkbox" name="frmname2" value="用户11" />用户11 
          <input type="checkbox" name="frmname2" value="用户12" />用户12 
          <input type="checkbox" name="frmname2" value="用户13" />用户13 
          <input type="checkbox" name="frmname2" value="用户14" />用户14 
          <input type="checkbox" name="frmname2" value="用户15" />用户15 
          <input type="checkbox" name="frmname2" value="用户16" />用户16 
          <input type="checkbox" name="frmname2" value="用户17" />用户17 
          <input type="checkbox" name="frmname2" value="用户18" />用户18 </div><br>
        <div> 
            <input type="checkbox" name="checkall3" id="checkall3" onclick="CheckAll('frmname3',this)" />全选用户组3 </div> 
        <div class="Q_left_content"> 
          <input type="checkbox" name="frmname3" value="用户19" />用户19 
          <input type="checkbox" name="frmname3" value="用户20" />用户20 
          <input type="checkbox" name="frmname3" value="用户21" />用户21 
          <input type="checkbox" name="frmname3" value="用户22" />用户22 
          <input type="checkbox" name="frmname3" value="用户23" />用户23 
          <input type="checkbox" name="frmname3" value="用户24" />用户24 
          <input type="checkbox" name="frmname3" value="用户25" />用户25 
          <input type="checkbox" name="frmname3" value="用户26" />用户26 
          <input type="checkbox" name="frmname3" value="用户27" />用户27 
          <input type="checkbox" name="frmname3" value="用户28" />用户28 
          <input type="checkbox" name="frmname3" value="用户29" />用户29 
          <input type="checkbox" name="frmname3" value="用户30" />用户30 
        </div><br> 
    </div> <div>已经被选中的好友 </div> 
    <div id="frmnamelist" style="border:1px red solid"> </div>
    </body></html>没高亮，重发
      

  8.   

    感谢JeffJian的帮助，批量修改没有问题，多谢了。问题圆满解决，继续学习……
    我另外开贴，请JeffJian光临接分。