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

Question

我有一个按钮网格，如果用户点击按钮，按钮的值将进入只读文本框。 我想要的是我无法工作的是我希望网格中的所选按钮变为绿色，而所有其他未选择的按钮保持与原样相同的颜色。 这样做的原因是，如果用户随时打开网格，他们可以通过按钮上的颜色变化看到当前选择的按钮。 如果选择了另一个按钮，则先前选择的按钮将变为白色，新选择的按钮将变为绿色。

有谁知道如何做到这一点？

我目前的代码是在jsfiddle。 点击这里

谢谢

Answer 1

只需添加：

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

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

Answer 2

你可以像我在这个小提琴做的那样做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

首先使用jQuery订阅事件。

$(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');
    });

});

代码： http ： //jsfiddle.net/Ksh59/13/

PS我有点改变风格。