嘿嘿，清洁工来解决问题拿分


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
 <BODY>
<div id="unchecked">
 <label><input type="checkbox">工会1</label>
 <label><input type="checkbox">工会2</label>
 <label><input type="checkbox">工会3</label>
 <label><input type="checkbox">工会4</label>
 <label><input type="checkbox">工会5</label>
</div>
    <br><br>
<div id="checked">
  <label><input type="checkbox" checked>工会6</label>
  <label><input type="checkbox" checked>工会7</label>
  <label><input type="checkbox" checked>工会8</label>
  <label><input type="checkbox" checked>工会9</label>
  <label><input type="checkbox" checked>工会10</label>
</div>
 </BODY>
 <script>
var unchecked = document.getElementById("unchecked");
var checked = document.getElementById("checked");
var lblArr = document.getElementsByTagName("label");
for(var i=0;i<lblArr.length;i++){
lblArr[i].firstChild.onclick = function(){
if(this.checked){
checked.appendChild(this.parentNode);
}else{
unchecked.appendChild(this.parentNode);
}
}
}
 </script>
</HTML>

解决方案 »

  1.   

    参考如下代码：
    <html>
    <body>
    <div id="div_true" style="height:200px;width:200px;background-color:Red;">
    <div><input type="checkbox" id="checkbox_1_true" /><label for="checkbox_1_true">1</label></div>
    <div><input type="checkbox" id="checkbox_2_true" /><label for="checkbox_2_true">2</label></div>
    <div><input type="checkbox" id="checkbox_3_true" /><label for="checkbox_3_true">3</label></div>
    <div><input type="checkbox" id="checkbox_4_true" /><label for="checkbox_4_true">4</label></div>
    </div>
    <div id="div_false" style="height:200px;width:200px;background-color:Green;">
    <div style="display:none"><input type="checkbox" id="checkbox_1_false" /><label for="checkbox_1_false">1</label></div>
    <div style="display:none"><input type="checkbox" id="checkbox_2_false" /><label for="checkbox_2_false">2</label></div>
    <div style="display:none"><input type="checkbox" id="checkbox_3_false" /><label for="checkbox_3_false">3</label></div>
    <div style="display:none"><input type="checkbox" id="checkbox_4_false" /><label for="checkbox_4_false">4</label></div>
    </div>
    <script type="text/javascript">
    function $(id) { return document.getElementById(id); }
    var checkboxs = $("div_true").getElementsByTagName("input");
    for (var i = 0; i < checkboxs.length; i++) {
    checkboxs[i].onclick = function () {
    this.parentNode.style.display = "none";
    var obj = $(this.id.replace(/_true$/ig, "_false"));
    obj.parentNode.style.display = "block";
    obj.checked = true;
    }
    }var checkboxs = $("div_false").getElementsByTagName("input");
    for (var i = 0; i < checkboxs.length; i++) {
    checkboxs[i].onclick = function () {
    this.parentNode.style.display = "none";
    var obj = $(this.id.replace(/_false$/ig, "_true"));
    obj.parentNode.style.display = "block";
    obj.checked = false;
    }
    }
    </script>
    </body>
    </html>
      

  2.   

    两种方法都学习了，一种是通过appendChild
    另一种通过设置隐藏显示
    结贴。