waqas adil waqas adil - 2 months ago 6
jQuery Question

I need a help on copying selected checkbox value

I need to copy the checked items from the check box.

I am unable to understand how we can remove the empty list from item list.

HTML :

<div id="grocery-list">
<h3>Item List</h3>
<ul>
<li class="empty">Empty</li>
</ul>
</div>
<form>
<fieldset>
<legend>Add Item</legend>
<label for="item">Item:</label>
<input id="item" type="checkbox" name="vehicle" value="bike"/>I have a bike
<br>
<input id="item" type="checkbox" name="vehicle" value="cycle" />I have a bicycle
<br>
<input id="item" type="checkbox" name="vehicle" value="aeroplane" />I have a aeroplane
<br/>
<input id="item" type="checkbox" name="vehicle" value="Car"/>I have a car

<button>Add</button>
</fieldset>
</form>


JS :

$( "button" ).button();

function addToList( value ) {
var list = $( "#grocery-list ul" );
list.append( "<li>" + value + "</li>" );
list.find( ".empty" ).remove();
};

$( "form" ).on( "submit", function( event ) {
event.preventDefault();
$( "input" ).effect( "transfer", {
to: "#grocery-list ul",
complete: function() {
addToList( $( this ).val() );
$( this ).val( "" );
}
});
});


My fiddle

Thanks in Advance for your great kind help.

Answer

$( "button" ).button();

function A( values ) {
    var items = $( "#grocery-items ul" );
    items.empty();
    values.each(function(){
    	items.append( "<li>" + $(this).val() + "</li>" );
    });
};

$( "form" ).on( "submit", function( event ) {
    event.preventDefault();
    $( "input:checked" ).effect( "transfer", {
        to: "#grocery-items ul",
        complete: function() {
            A( $( "input:checked" ) );
        }
    });
});

Comments