如何根据复选框选择将项目从一个列表移动到另一个列表

本文介绍了如何根据复选框选择将项目从一个列表移动到另一个列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

<html>
<head>
 
<style type="text/css">
 
div.ex1
{
    width:100px;
    padding:20px;
    border:1px solid gray;
    margin:0px;
}
div.ex2
{
    width:100px;
    padding:20px;
    border:1px solid gray;
    margin:0px;
}
</style>
 
<script type="text/javascript">
 
function mirror()
{
    var data=document.getElementById("theDiv");
    document.getElementById("theDiv").innerHTML=" "+data.innerHTML+'<input type="checkbox"></input>'+ document.getElementById("txtarea").value+"<br>";
    
}
 

</script>
</head>
<body>
 
<br>
<table><tbody><tr>
 
<input name="txtarea" id="txtarea" type="text">
 
<input type="button" name="Submit" value="Submit" onclick ="mirror()">
</tr></tbody></table>
<br>
<table><tbody><tr>
 
<!--<textarea class="bgclr" wrap="virtual" rows="4" cols="30" disabled>
</textarea>
<textarea class="bgclr" name="textarea"wrap="virtual" rows="4" cols="30" disabled>
 
</textarea>-->
 

<div id="theDiv" class="ex1">
</div>
 
<input type="button" name="submit" value="shift" ><br>
<br>
<div class="ex2">
</div>
 
<input type="button" name="submit" value="remove" ><br>
 
</body>
</html></br></br></br></tr></tbody></table></br></br></br>

推荐答案

<html>
<head>
 <title></title>
<style type="text/css">

div.ex1
{
    width:100px;
    padding:20px;
    border:1px solid gray;
    margin:0px;
}
div.ex2
{
    width:100px;
    padding:20px;
    border:1px solid gray;
    margin:0px;
}
</style>

<script type="text/javascript">

    var id = 1;
    function mirror() {
        var checkboxID = 'checkID' + id;
         var spanID = 'Span' + id;
        alert(checkboxID);
        var data = document.getElementById("theDiv");
        document.getElementById("theDiv").innerHTML = " " + data.innerHTML + ' <span id=' + spanID + ' onchange=check("' + spanID + '")> <input id="' + checkboxID + '" type="checkbox" /> ' + document.getElementById("txtarea").value + "<br> </span>";
        id++;
    }
    function check(targ) {
        alert(targ);
        var element = document.getElementById(targ);
        alert(element.innerHTML);
        document.getElementById("div1").innerHTML += '<span id=' + targ + ' >' + element.innerHTML + '</span>';
        element.parentNode.removeChild(element);



    }

</script>
</head>
<body>

<br />
<table><tbody><tr>
 <td>
<input name="txtarea" id="txtarea" type="text" />
 </td>
 <td>
<input type="button" name="Submit" value="Submit" onclick ="mirror()" />
</td></tr></tbody></table>
<br />
<table><tbody><tr>
 <td>
<!--<textarea class="bgclr" wrap="virtual" rows="4" cols="30" disabled>
</textarea>
<textarea class="bgclr" name="textarea"wrap="virtual" rows="4" cols="30" disabled>

</textarea>-->


<div id="theDiv" class="ex1">
</div>

<input type="button" name="submit" value="shift" /><br/>
<br/>
<div id="div1" class="ex2">
</div>

<input type="button" name="submit" value="remove" /><br/>
 <br/><br/><br/></td>
    <td>
        </td>
    </tr></tbody></table>
    <input id="checkboxID" type="checkbox" onchange="check('checkboxID')" />
</body>
</html>

这篇关于如何根据复选框选择将项目从一个列表移动到另一个列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！