jquery change button color onclick

Question

私は人々が質問に答えるときに私が使用する複数のボタンがあります。ボタンをクリックしたときにボタンをどのように色を変えるには？ので、任意のコードで

<div style="text-align: center;"><span style="line-height: 18px; font-family: Arial, Helvetica, sans-serif; font-size: 24px;">In the past three months, how often have you used marijuana?<br /> 
<p><input type="submit" value=" Never " name="btnsubmit" id="answer" style="width: 200px;" /></p> 
<p><input type="submit" value=" Once or Twice " name="btnsubmit" id="answer" style="width: 200px;" /></p> 
<p><input type="submit" value=" Monthly " name="btnsubmit" id="answer" style="width: 200px;" /></p> 
<p><input type="submit" value=" Daily or Almost Daily " name="btnsubmit" id="answer" style="width: 200px;" /></p> 
</span></div> 
<div> 
<p style="text-align: right;"><a onclick="window.open(this.href,'_parent');return false;" href="/mobile/Static2.aspx"><input type="submit" value=" Next " name="btnsubmit" style="width: 100px;" /></a></p> 
</div> 

私は本当に新しいです：私はjqueryのを知らない、私はここでは、この

に使用するための最良のものであると言われている私は、HTML部分を持っているコードがあります助けの種類は高く評価されるでしょう！

Answer 1

$('input[type="submit"]').click(function(){ 
$(this).css('color','red'); 
}); 

利用クラス、デモ： - ：http://jsfiddle.net/SMNks/

$('input[type="submit"]').click(function(){ 
    $(this).toggleClass('red'); 
}); 


.red 
{ 
    background-color:red; 
} 

あなたのコメントのための更新の答え - http://jsfiddle.net/BX6Df/

$('input[type="submit"]').click(function(){ 
      $(this).addClass('red'); 
}); 

あなたは色に各クリックを切り替えたい場合、あなたはこれを試すことができます。

http://jsfiddle.net/H2Xhw/

$('input[type="submit"]').click(function(){ 
    $('input[type="submit"].red').removeClass('red') 
     $(this).addClass('red'); 
}); 

Answer 2

私はちょうど別のCSSクラスを作成します。

.ButtonClicked { 
    background-color:red; 
} 

、[OK]をクリックします上のクラスを追加します。

$('#ButtonId').on('click',function(){ 
    !$(this).hasClass('ButtonClicked') ? addClass('ButtonClicked') : ''; 
}); 

これはthis jsFiddleで示す、あなたが探しているものを行う必要があります。 ?などでロジックが不思議であれば、ternary (or conditional) operatorsと呼ばれ、その単純なifロジックを使ってクラスが既に追加されているかどうかを確認する簡潔な方法です。

$('#ButtonId').on('click',function(){ 
    $(this).toggleClass('ButtonClicked'); 
}); 

this jsFiddleによって示される：

はまた、「オン/オフ」スイッチは、クラスをトグルすることによって感じる有する能力を作成することができます。思考のためだけの食糧。

Answer 3

使用CSS：

<style> 
input[name=btnsubmit]:active { 
color: green; 
} 
</style> 

Answer 4

あなたのページにこのコードを追加します。

<script type="text/javascript"> 
$(document).ready(function() { 
    $("input[type='submit']").click(function(){ 
     $(this).css('background-color','red'); 
    }); 
}); 
</script> 

Answer 5

あなたがCDNからドキュメントヘッドにjqueryの枠組みを含める必要が例えば：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> 

その後、たとえば独自のスクリプトを含める必要があります：

(function($) { 

    $(document).ready(function(){ 
     $('input').click(function() { 
      $(this).css('background-color', 'green'); 
     } 
    }); 


    $(window).load(function() { 
    }); 

})(jQuery); 

この部分はそう実際にはjQueryの（「セレクタ」）で、$はjQueryへの写像である関数（）;。ここで

(function($) { 

})(jQuery); 

あなたはすべての機能が例と説明と共に一覧表示されているのjQueryのAPI死ぬ見つけることができます。http://api.jquery.com/