Comment changer la couleur d'un bouton lorsque le bouton est sélectionné?

Question

J'ai une grille de boutons où si l'utilisateur clique sur un bouton, la valeur du bouton va dans la zone de texte en lecture seule. Ce que je veux que je ne peux pas travailler, c'est que je veux que le bouton sélectionné de la grille passe au vert et tous les autres boutons non sélectionnés pour rester la même couleur que c'est. La raison en est que si l'utilisateur ouvre la grille à tout moment, il peut voir le bouton actuellement sélectionné par le changement de couleur sur le bouton. Si un autre bouton est sélectionné, le bouton sélectionné précédemment devient blanc et le nouveau bouton sélectionné devient vert.

Est-ce que quelqu'un sait comment faire cela?

mon code actuel est dans jsfiddle. cliquez sur here

Merci

Answer 1

Il suffit d'ajouter ceci:

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

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

Answer 2

tout d'abord utiliser l'abonnement jQuery aux événements.

$(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 J'ai des styles de changer un peu.

Answer 3

Vous pouvez le faire comme je l'ai fait dans ce violon 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; 
    } 
}