将复选框从一个组移动到另一个组

Question

我想做一个简单的工作搜索，但我没有完成，如果我选中撤消中的复选框，它会移动到完成组，如果我选中第二个复选框，它也会移动到完成组，如果我选中完成中的复选框，它会移回撤消，我已经在 jquery 中完成了这个，但想在 javascrip
中执行此操作任何人都可以帮助我吗

<table width="427" height="88">
<tr><td><input type="button" name="submit" value="Add New" /></td></tr>
<tr>
<td id="1">Undone<br />
<input type="checkbox" name="chk1" id="chk1" onclick="remove(this.id);" />
<input type="checkbox" name="chk2" id="chk2" onclick="remove(this.id);"/>
<input type="checkbox" name="chk3" id="chk3" onclick="remove(this.id);"/></td>
</tr>
<tr>
<td id="2">Done<br />
<input type="checkbox" name="chk4" id="chk4" onclick="remove2(this.id)"/>
<input type="checkbox" name="chk5" id="chk5" onclick="remove2(this.id)"/>
<input type="checkbox" name="chk6" id="chk6" onclick="remove2(this.id)"/>
</td>
</tr>
</table>
</body>
</html>
<script>
function remove(id){
 $("#"+id).remove();
 var chk='<input type="checkbox" name='+id+' id='+id+' onclick="remove2(this.id)"/>';
 $("#2").append(chk);
 };
 function remove2(id){
 $("#"+id).remove();
 var chk='<input type="checkbox"  name='+id+' id='+id+' onclick="remove(this.id)"/>';
 $("#1").append(chk);
 };
 </script>

Answer 1

这是我

整理的内容。您可以查看jsfiddle上的工作演示：http://jsfiddle.net/nathanmyles/CXWYa/

JavaScript

function setup(){
    var done = document.getElementById('done');
    attachClickEvents(done, moveToUndone);
    var undone = document.getElementById('undone');
    attachClickEvents(undone, moveToDone);
}
function attachClickEvents(parent, moveFunction){
    var elements = parent.children;
    for(var i = 0; i < elements.length; i++){
        var element = elements[i];
        if(element.tagName.toLowerCase() === 'input'){
            var id = element.id;
            attachOnClick(element, moveFunction, id);
        }
    }
}
function moveToDone(id) {
    remove(id);
    append('done', createCheckBoxElement(id, moveToUndone));
}
function moveToUndone(id) {
    remove(id);
    append('undone', createCheckBoxElement(id, moveToDone));
}
function createCheckBoxElement(id, moveFunction){
    var element = document.createElement('input');
    element.setAttribute('type', 'checkbox');
    element.setAttribute('name', id);
    element.setAttribute('id', id);
    attachOnClick(element, moveFunction, id);
    return element;
}
function attachOnClick(element, callback, id){
    element.onclick = function() {
        callback(id);
    };
}
function append(parentId, element){
    var parent = document.getElementById(parentId);
    parent.appendChild(element);
}
function remove(id) {
    var element = document.getElementById(id);
    element.parentNode.removeChild(element);
}
setup();

.HTML

<table width="427" height="88">
    <tr>
        <td id="undone">Undone
            <br />
            <input type="checkbox" name="chk1" id="chk1" />
            <input type="checkbox" name="chk2" id="chk2" />
            <input type="checkbox" name="chk3" id="chk3" />
        </td>
    </tr>
    <tr>
        <td id="done">Done
            <br />
            <input type="checkbox" name="chk4" id="chk4" />
            <input type="checkbox" name="chk5" id="chk5" />
            <input type="checkbox" name="chk6" id="chk6" />
        </td>
    </tr>
</table>