如何在選擇按鈕時更改按鈕的顏色？

我有一個按鈕的網格，如果用戶點擊一個按鈕，按鈕的值進入只讀文本框。我想要的是我無法工作的是，我希望網格中的選定按鈕變成綠色，而其他所有未選中的按鈕保持原樣。原因是，如果用戶隨時打開網格，他們可以通過按鈕上的顏色更改來查看當前選中的按鈕。如果選擇了另一個按鈕，則先前選擇的按鈕將變成白色，並且新選定的按鈕將變成綠色。如何在選擇按鈕時更改按鈕的顏色？

有誰知道如何做到這一點？

我目前的代碼是在jsfiddle。點擊here

謝謝

來源

2011-12-09 BruceyBandit

做的「正確」的方式做到這一點是使用單選按鈕，因爲（與調節器按鈕不同），它們被設計爲突出顯示當前選定的一個。 – RoToRa

嗨，謝謝大家的回答，所有這些答案都可以在我的應用程序中工作。我去buddhabrot的答案，因爲它只是添加兩行代碼，但任何答案將適用於我的應用程序，所以謝謝大家 – BruceyBandit

只需補充一點：

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

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

來源

2011-12-09 14:40:46 buddhabrot

首先，使用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我已經改變風格一點點。

來源

2011-12-09 14:38:10 Samich

你可以不喜歡我在這個小提琴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; 
    } 
}

來源

2011-12-09 14:41:05

如何在選擇按鈕時更改按鈕的顏色？

回答

相關問題