CODEWITHSUNDEEP
javascriptjquerycssbuttoncolors
BruceyBandit
BruceyBandit

Reputation: 4334

How to change a color of a button when button is selected?

I have a grid of buttons where if the user clicks on a button, the value of the button goes into the readonly textbox. What I want which I can't get working is that I want the selected button from the grid to turn green and all the other unselected buttons to stay the same color as it is. The reason for this is that if the user opens up the grid at any time, they can see the button that is currently selected by the change of color on the button. If another button is selected then the previous selected button would turn white and the new selected button would turn green.

Does anyone know how to do this?

my current code is in jsfiddle. click here

Thank you

Upvotes: 0

Views: 2116

Answers (3)

Samich
Samich

Reputation: 30185

First of all use jQuery subscription to the events. 

$(function() {
    $('#showGrid').click(function(e) {
        if ($('#optionTypeTbl').css("display") == "table") {
            $('#optionTypeTbl').hide();
        }
        else {
            $('#optionTypeTbl').css("display", "table");
        }
        e.stopPropagation();
    });

    $("body").click(function() {
        $('#optionTypeTbl').hide();   
    });

    $('#optionTypeTbl input').click(function() {

        // update value
        $('.box INPUT').val($(this).val())
        $('#optionTypeTbl').hide();

        // update ui class
        $('#optionTypeTbl input.gridBtnsOn').removeClass('gridBtnsOn').addClass('gridBtnsOff');
        $(this).addClass('gridBtnsOn');
    });

});

Code: http://jsfiddle.net/Ksh59/13/

P.S I've change styles a little bit.

Upvotes: 0

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

You could do like i did in this fiddle http://jsfiddle.net/nicolapeluchetti/Ksh59/6/

function buttonclick(button)
{

    $('input:button').css('background-color', 'transparent');
    $(button).css('background-color', 'green');
    if (button.className=="gridBtnsOn")
    {
        button.className="gridBtnsOff";
        return false;
    }

    if (button.className=="gridBtnsOff")
    {
        button.className="gridBtnsOn";
        return false;
    }
}

Upvotes: 1

buddhabrot
buddhabrot

Reputation: 1586

Just add this:

  $(".gridBtns").removeClass("gridBtnsOn");
  $(this).addClass("gridBtnsOn");

http://jsfiddle.net/Ksh59/7/

Upvotes: 1

Related Questions