将检查的值移动到另一个块并将它们附加在<li>列表中

问题描述

|| 我想将所选列表项从一个块（块1）移动到另一个块（块2）。移至第2块后，如果我从第2块中删除该项目，则应将其追加回到第1块。这是我的代码： HTML：

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />
<title>Untitled Document</title>
</head>
<body>
<table>
<tr>
    <td>
        <div id=\"left\">
            <ul>
                <li><input type=\"checkbox\" value=\"Option 1\" onclick=\"addval(this)\" />Option 1</li>
                <li><input type=\"checkbox\" value=\"Option 2\" onclick=\"addval(this)\" />Option 2</li>
            </ul>
        </div>
    </td>
    <td>
        <div id=\"right\">
            <ul>
            </ul>
        </div>
    </td>
</tr>
</table>
</body>
</html>

剧本：

function addval(x){
     values1 = $(x).val();
     $(\'#right ul\').append(\"<li><img src=\'http://www.msshifi.com/skin/frontend/msshifi/default/images/delete-icon.gif\' name=\"+ values1 +\" onclick=\'removeval(this,values1)\'></img>\"+ values1 +\"</li>\");
     $(x).parent().remove();

 }
 function removeval(y,val){
     values2 = val;
     $(\'#left ul\').append(\"<li><input type=\'checkbox\' value=\"+ values2 +\" name=\"+ values2 +\" onclick=\'addval(this)\' />\"+ values2 +\"</li>\");
     $(y).parent().remove();

 }

CSS：

div { border:1px #ccc solid; height:100px; overflow:auto; width:200px; background:#f1f1f1; }
ul { margin:0; padding:0; }
ul li { list-style:none; }

可以在以下网站在线获得相同的工作演示：http://jsfiddle.net/prajan55/maLqV/ 请帮助..在此先感谢。

解决方法

您只是缺少一些引号。在这里查看：http://jsfiddle.net/maLqV/7/ 固定代码：

function addval(x){
     values1 = $(x).val();
     $(\'#right ul\').append(\"<li><img src=\'http://www.msshifi.com/skin/frontend/msshifi/default/images/delete-icon.gif\' name=\'\"+ values1 +\"\' value=\'\" + values1 + \"\' onclick=\'removeval(this,\\\"\" + values1 + \"\\\")\'></img>\"+ values1 +\"</li>\");
     $(x).parent().remove();

 }
 function removeval(y,val){
     values2 = val;
     $(\'#left ul\').append(\"<li><input type=\'checkbox\' value=\'\"+ values2 +\"\' name=\'\"+ values2 +\"\' onclick=\'addval(this)\' />\"+ values2 +\"</li>\");
     $(y).parent().remove();

 }

, 我可以建议一个稍微不同的实现：

var checkedList = $(\'#right ul\');
var unCheckedList = $(\'#left  ul\');

$(\'input:checkbox\').click(
    function(){
        if (this.checked){
            $(this).closest(\'li\').appendTo(checkedList);
        }
        else if (!this.checked){
            $(this).closest(\'li\').appendTo(unCheckedList);
        }
    });

JS Fiddle演示。这保留了复选框和文本的详细信息，而您的实现似乎删除了标签或标签中的数字（似乎已由@ sje397的答案解决了），但是此版本还允许单击处理程序从元素的“ 5”属性中删除。可能是，也可能不是。

li 加在另一个并将检查检查检查移动移动表中

将检查的值移动到另一个块并将它们附加在<li>列表中

问题描述

解决方法

相关问答