如何在选择按钮时更改按钮的颜色？

Question

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

Answer 1

Just add this:

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

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

Answer 2

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;
    }
}

Answer 3

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/

PS I've change styles a little bit.