CODEWITHSUNDEEP
jqueryjquery-selectors
Destiny In Ur Hands
Destiny In Ur Hands

Reputation: 199

Add or remove item to <li> based on checkboxes selection

I've four checkboxes in one div.

<div id="tab1" class="tab-pane">
    <input type="checkbox" id="chkbox" value="101">  This is 101
    <input type="checkbox" id="chkbox" value="102">  This is 102
    <input type="checkbox" id="chkbox" value="103">  This is 103
    <input type="checkbox" id="chkbox" value="104">  This is 104
</div>

Now on each click, I want to insert/remove a <li> item on another div that's on the right hand side when the checkbox is checked/unchecked. Another div:

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

Am doing something like this:

$("#chkbox").click(function() {
            // If checked
            if ($(this).is(":checked")) {
                //add to the right
                $a = $(this).val();
                $("#itemList").append('<li>'+$a+'</li>');
            }
            else {
                //hide to the right
                $("#itemList").slideUp("fast", function () {
                        $("#itemList").child.remove();
                    });
            }
        });

This doesn't seem to work :(

Upvotes: 2

Views: 6394

Answers (4)

Blake Plumb
Blake Plumb

Reputation: 7209

undefined is right you need to change your id chkbox to class chkbox. I have modified your javascript to give the effect you are going for. Here is a fiddle. 

$(".chkbox").click(function() { 
    var a = $(this).val();  //store the value of clicked .chkbox
    // If checked           
    if ($(this).is(":checked")) {  
        //add to the right                
        $("#itemList").append('<li>'+a+'</li>'); //append li to list           
    }            
    else {                
    //hide to the right                
        $("#itemList > li").each(function(){// go through all of the li elements
            if($(this).text() == a){ //check if text is equal to a
                $(this).slideUp('fast', function(){ //slide up the li and then remove it
                    $(this).remove();
                 });
            }                   
        });             
    }        
});

Upvotes: 2

Ram
Ram

Reputation: 144719

IDs must be unique, you should use classes instead, And also note that jQuery object doesn't have child property, you should use children method instead, however it seems you only want to remove one element, you can use contains selector.

<input type="checkbox" class="chkbox" value="101">  This is 101


$(document).ready(function() {
    var $list = $("#itemList");

    $(".chkbox").change(function() {
        var a = this.value;
        if (this.checked) {
            $list.append('<li>' + a + '</li>');
        }
        else {
            $("#itemList li:contains('"+a+"')").slideUp(function(){
               $(this).remove();
            })
        }

    })
})

http://jsfiddle.net/hhqh5/

Upvotes: 2

Ricardo Lohmann
Ricardo Lohmann

Reputation: 26320

Fix the following issues:

  • Change multiple elements with the same id to a class
  • Use change event instead of click
  • identify which checkbox referes your items. For this I'm using data attr.


$(".chkbox").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();
        });
    }
});

Demo

Upvotes: 4

Netorica
Netorica

Reputation: 19347

Base on my understanding on your question, you mean to remove or add a corresponding <li> base on a certain checkbox.

You must use a class so you can use a single style rule for you checkboxes if in case

<div id="tab1" class="tab-pane">
    <input type="checkbox" class="chkbox" value="101">  This is 101
    <input type="checkbox" class="chkbox" value="102">  This is 102
    <input type="checkbox" class="chkbox" value="103">  This is 103
    <input type="checkbox" class="chkbox" value="104">  This is 104
</div>
<div>
    <ul id="itemList"></ul>
</div>

and this will be the JS that will work base on what I understand on your question

 $(".chkbox").click(function() {
            // If checked
            $a = $(this).val();
            if ($(this).is(":checked")) {
                //add to the right
                $("#itemList").append('<li id="'+$a+'">'+$a+'</li>');
            }
            else {
                //hide to the right

                        $("#" + $a).remove();

            }
        });

DEMO: http://jsfiddle.net/laupkram/5PMkA/

Upvotes: 1

Related Questions