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 부분에 대해 가지고있는 코드는 친절한 도움을 받으실 수 있습니다!

.ButtonClicked { 
    background-color:red; 
} 

을 누른 다음에 클래스를 추가 :

Answer 1

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

사용 클래스 데모 : - 당신은 색상을 클릭 할 때마다 전환하려는 경우, 당신이 시도 할 수 http://jsfiddle.net/BX6Df/

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

: - 귀하의 코멘트에 대한 http://jsfiddle.net/SMNks/

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


.red 
{ 
    background-color:red; 
} 

업데이트 대답 .

http://jsfiddle.net/H2Xhw/

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

Answer 2

난 그냥 별도의 CSS 클래스를 만들 것이다

$('#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으로 표시 :

당신은 또한 "ON/OFF"스위치가 클래스를 전환하여 느낌을 가질 수있는 능력을 만들 수 있습니다. 생각을위한 음식.

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

을 당신은 캐나다에서 문서 헤드에서 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/