Moving checked values to another block and appending them within <li> lists
I want to move the selected list items from one block (block 1) another block (block 2). After moving to block 2, if I delete the item from block 2, it should append back to block 1.
Here is my code:
The 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>
The script:
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();
}
The CSS:
div { border:1px #ccc solid; height:100px; overflow:auto; width:200px; background:#f1f1f1; }
ul { margin:0; padding:0; }
ul li { list-style:none; }
Working demo of the same is available online at : http://jsfiddle.net/prajan55/maLqV/
Kindly help.. thanks in advance.
You're just missing a few quotes.
Look here: http://jsfiddle.net/maLqV/7/
Fixed code:
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();
}
May I suggest a slightly different implementation:
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 demo.
This preserves the details of the checkbox and text, whereas your implementation seemed to remove the label, or the number from the label (which seems to have been resolved by @sje397's answer), but also this version allows for the click handler to be removed from the onclick attribute of the elements. Which may, or may not, be a bonus.
加载中,请稍侯......
精彩评论