Checkbox as radio button and add remove values on check Uncheck

Question

I want to have checkboxes work as radio buttons and at the same add and remove data on check and uncheck respectively.

What I got is working fine when only one checkbox is checked, but not working when I check both. Problem is that after checking 1st checkbox when I check the 2nd box the 1st one is unchecked but the value of 1st is not removed from the list.

Here is fiddle: http://jsfiddle.net/uZvMA/

JavaScript:

var $unique = $('input.unique');
$unique.click(function() {
    $unique.filter(':checked').not(this).removeAttr('checked');

});    

$("#BlackOlives-Half").change(function() {
    // If checked
    var value = $(this).val(),
        $list = $("#itemList");
    if (this.checked) {
        //add to the right
        $list.append("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
        //hide to the right
        $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
            $(this).remove();
        });
    }
});
$("#BlackOlives-Full").change(function() {
    // If checked
    var value = $(this).val(),
        $list = $("#itemList");
    if (this.checked) {
        //add to the right
        $list.append("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
        //hide to the right
        $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
            $(this).remove();
        });
    }
});     

HTML:

<ul>
    <li><div id="BlackOlives-Half10">Black Olives</div>
        <div class="radioButtons">
        <input type="checkbox" id="BlackOlives-Half" onchange="" class='unique' name="BlackOlives" value="5" /> <label for="BlackOlives-Half">Half</label>
        <input type="checkbox" id="BlackOlives-Full" onclick="" class='unique' name="BlackOlives" value="10" /> <label for="BlackOlives-Full">Full</label>
        </div>

    </li>

</ul>
<ul id="itemList"></ul>

Answer 1

You may not be as interested in this solution now that you have a working one, but I challenged myself to improve upon the initial code a bit. Rather than just calling change on everything and be satisfied, I also wanted to make your code not require nearly 10 additional lines of code per checkbox you would like to support.

This fiddle includes an extension to jQuery that will enforce uniqueness, retain your animations, and allow reusability (to some extent -- it isn't perfect given that it demands you use an ul .)

http://jsfiddle.net/uZvMA/5/

At the very least, please take a look and teach yourself another new thing today :)

EDIT: Updated JSFiddle with proof it works in multiple instances. http://jsfiddle.net/uZvMA/6/

Answer 2

Just add

 $("#itemList").empty();

in both your click function

JSFIDDLE DEMO

Answer 3

The problem is you are programmatically setting the checked state but it is not firing the change event you need to trigger the change event after. by calling .trigger('change');

have a look at your updated fiddle

Answer 4

Instead of append, give as html in the BlackOlives-Half and BlackOlives-Full in if condition

DEMO HERE

$("#BlackOlives-Half").change(function() {
    // If checked
    var value = $(this).val(),
    $list = $("#itemList");
    if (this.checked) {
         //add to the right
         $list.html("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
    //hide to the right
    $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
        $(this).remove();
    });
}
});
$("#BlackOlives-Full").change(function() {
    // If checked
    var value = $(this).val(),
    $list = $("#itemList");
    if (this.checked) {
        //add to the right
        $list.html("<li data-value='" + value + "'>" + value + "</li>");
    }
    else {
    //hide to the right
    $list.find('li[data-value="' + value + '"]').slideUp("fast", function() {
        $(this).remove();
    });
}
});