How to select and unselect a li item using jquery?

Question

Here i am selecting a li item in a list and changing the border of that li item but if i select another li item the border of the currently selected item is changing but the previously selected li items border color has to change to the original color

Here is my code

 $(document).ready(function () {
        $("#list3 li").click(function () {
            $("list3 li.clicked").removeClass("clicked");
            $(this).addClass("clicked");
            $(".clicked").css("border", "3px solid red");

        });
  });

Any suggestion?

How about rather than setting inline styles using `.css()` you just add the CSS properties you want to change to the `clicked` class definition? — Anthony Grist, Mar 22 '12 at 11:58
I think the following links could give you the answer: http://stackoverflow.com/questions/1857781/best-way-to-unselect-a-select-in-jquery and http://stackoverflow.com/questions/8452277/jquery-select-unselect-multiselect-options-with-replacement-divs — Janaki, Mar 22 '12 at 12:01
@Dubious Did you read this question or any of the ones you linked? They're not asking similar things at all. — Anthony Grist, Mar 22 '12 at 12:04

score 1 · Answer 1 · answered Mar 22 '12 at 12:01

Add a CSS definition for the class clicked to the external CSS file for your page or inside a <style> tag, like so:

.clicked {
    border: 3px solid red;
}

That way the CSS handles the styling for you, and the border should automatically revert to its previous state once you remove the class.

score 1 · Answer 2 · answered Mar 22 '12 at 12:01

1

$(document).ready(function () {
        $("#list3 li").click(function () {
            $("#list3 li").css("border", "none");
            $(this).css("border", "3px solid red");

        });
  });

answered Mar 22 '12 at 12:01

Sven Bieder

5,319
2
19
27

score 1 · Answer 3 · answered Mar 22 '12 at 12:02

1

$(document).ready(function () {
  $("#list3 li").click(function () {
    $("#list3 li.clicked").toggleClass("clicked");
    // if you don't want to be able to deselect the li that is already selected
    // add this 
    // if (!$(this).hasClass("clicked")) {
      $(this).toggleClass("clicked");
    // }
 });
});

and css style rule:

.clicked {
  border: 3px solid red;
  ... extra customization
}

answered Mar 22 '12 at 12:02

user1236048

5,442
7
47
87

it is working fine..i have tried it for mouseover like $("#list3 li").mouseover(function () { $("#list3 li.mouseover").toggleClass("mouseover"); $(this).toggleClass("mouseover"); }); – bala3569 Mar 22 '12 at 12:52
.mouseover { border: 3px solid blue; it is also working but when i leave the mouse from list1 to list2..the last mouseover li item has that border.how to remove that border while traversing from one list to another list – bala3569 Mar 22 '12 at 12:54
@bala3569 you need to handle the mouseout event also – user1236048 Mar 22 '12 at 13:15
how to select multiple li items using control button? – bala3569 Mar 26 '12 at 06:42

score 1 · Answer 4 · answered Mar 22 '12 at 12:02

This should work

$(document).ready(function () {
        $("#list3 li").click(function () {
            $("list3 li.clicked").css("border","0");
            $("list3 li.clicked").removeClass("clicked");
            $(this).addClass("clicked");
            $(".clicked").css("border", "3px solid red");

        });
  });

Alternatively, you can put the border property in the .clicked class itself.

score 1 · Answer 5 · answered Mar 22 '12 at 12:05

The line:

 $(".clicked").css("border", "3px solid red");

Doesn't update the styling of "clicked" it only changes the styling of the selected element(s) i.e. $(this).

You'd be better adding a css rule for .clicked:

.clicked {
    border: 3px soild red;
}

And removing the original line from your javascript thus:

$(document).ready(function () {
    $("#list3 li").click(function () {
        $("list3 li.clicked").removeClass("clicked");
        $(this).addClass("clicked");
    });
});

Then the styling changes will happen automatically using the addClass() and removeClass() functions.

score 1 · Accepted Answer · answered Mar 22 '12 at 12:10

1

You can achieve this with less code. Write like this:

$("#list3 li").click(function () {
            $("#list3 li").removeClass('clicked');
            $(this).addClass('clicked');

        });

Check this http://jsfiddle.net/q4qR8/1/

answered Mar 22 '12 at 12:10

sandeep

88,914
23
135
154

it is working fine..i have tried it for mouseover like $("#list4 li").mouseover(function () { $("#list4 li").removeClass('mouseover'); $(this).addClass('mouseover'); }); – bala3569 Mar 22 '12 at 13:00
it is also working but when i leave the mouse from list1 to list2..the last mouseover li item has that border.how to remove that border while traversing from one list to another list – bala3569 Mar 22 '12 at 13:01
But i recommend you can achieve this without JS check this http://jsfiddle.net/q4qR8/3/ – sandeep Mar 22 '12 at 13:24
how to select multiple li items using control button? – bala3569 Mar 26 '12 at 05:48

How to select and unselect a li item using jquery?

6 Answers6