I am trying to make a select-unselect image by change border color on click by this code

var $box=null;

$('img')
    .click(function() {
        if ($box == null) {
            $box = $(this);
            $box.css("border","5px solid green");
        } else  {
            $box.css("border","5px solid white");
            $box = null;
        }
    }
);

The code is working fine except when I try to select-unselect and select same image. I want to select the other image by one click.

I tried to check if ($box == $(this)) but it does not work.

I am trying to make a select-unselect image by change border color on click by this code

var $box=null;

$('img')
    .click(function() {
        if ($box == null) {
            $box = $(this);
            $box.css("border","5px solid green");
        } else  {
            $box.css("border","5px solid white");
            $box = null;
        }
    }
);

The code is working fine except when I try to select-unselect and select same image. I want to select the other image by one click.

I tried to check if ($box == $(this)) but it does not work.

• javascript
• jquery

Share Improve this question Follow edited Aug 21, 2013 at 13:22 Chad Ferguson 3,08755 gold badges3737 silver badges4242 bronze badges asked Aug 21, 2013 at 13:13 LE SANGLE SANG 11k77 gold badges6262 silver badges7979 bronze badges 4

• Is it important to store the selected state (for use in other parts of your code) or do you just want to toggle the style of the border? – rink.attendant.6 Commented Aug 21, 2013 at 13:22
• Yes, I need to store null state(no one selected) for other control – LE SANG Commented Aug 21, 2013 at 13:23
• Ok, and are you saying that in a set of images, only 1 can be selected? – rink.attendant.6 Commented Aug 21, 2013 at 13:25
• Yes, only-one or No-one(select then de-selected) selected – LE SANG Commented Aug 21, 2013 at 13:26

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Use a class instead, and toggle the class when needed. This solution acts like a radio button (only one image with a border at a time), but allows you to deselect the active image as well:

http://jsfiddle/6cGVz/

$('img').click(function() {
    var $this = $(this);
    if ($this.hasClass('active')) {
        $this.removeClass('active');
    } else {
        $('.active').removeClass('active');
        $this.addClass('active');
    }
});

Explanation

Check if $box is the clicked element or not. If it is, just hide its border if it has one. Otherwise, put the border on the clicked element!

---

Solution (Live Demo)

JavaScript/JQuery

var $box=null;

$('img')
    .click(function() {
        if ($box == null) {
            $box = $(this);
            $box.css("border","5px solid green");
        } else  {
            $box.css("border","5px solid white");
            if($box != $(this))
            {
                $box = $(this);
                $box.css("border","5px solid green");
            }
            else
                $box = null;
        }
    }
);

For the purposes of your question, I will put all of the images in a container:

<div id='setOfImages'>
    <img ... >
    <img ... >
    <img ... >
    <img ... >
</div>

Toggle a class.

$('#setOfImages > img').click(function() {
    'use strict';

    if($(this).hasClass('selected')) {
        // Deselect currently selected image
        $(this).removeClass('selected');
    } else {
        // Deselect others and select this one
        $('#setOfImages > img').removeClass('selected');
        $(this).addClass('selected');
    }
});

And in your CSS:

#setOfImages > img {
    border: 5px solid #fff;
}

#setOfImages > img.selected {
    border: 5px solid green;
}

See jsFiddle demo.

Update - only one image can be selected

toggleClass of jQuery method make it so easy -

Using Js -

$('img').click(function() {

    if ($(this).hasClass("selected")) {
        $("img.selected").removeClass("selected");
    } else {
        $("img.selected").removeClass("selected");
        $(this).addClass("selected");
    }

});

with css -

.selected{
    border:5px solid green;
 }

Demo

You can add a data attribute to the image itself, instead of relying on something external.

$('img')
    .click(function() {
        var img = $(this);
        if (! img.data('box')) {
            img.css("border","5px solid green");
            img.data('box', true);
        } else  {
            img.css("border","5px solid white");
            img.data('box', false);
        }
    }
);

A working example: http://codepen.io/paulroub/pen/qbztj