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

【问题标题】：How to change a color of a button when button is selected?选择按钮时如何更改按钮的颜色？
【发布时间】：2012-01-16 20:00:47
【问题描述】：

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

有人知道怎么做吗？

我当前的代码在 jsfiddle 中。点击here

谢谢

【问题讨论】：

“正确”的做法是使用单选按钮，因为（与常规按钮不同）它们旨在突出显示当前选定的按钮。
嗨，谢谢大家的回答，所有这些答案都可以在我的应用程序中使用。我选择了 buddhabrot 答案，因为它只是添加了两行代码，但任何答案都适用于我的应用程序，所以谢谢大家

标签： javascript jquery css button colors

【解决方案1】：

只需添加这个：

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

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

【讨论】：

【解决方案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;
    }
}

【讨论】：

【解决方案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/

P.S 我稍微改变了样式。

【讨论】：