Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery change button color onclick

I have multiple buttons that I use when people answer a question. How would I get the buttons to change colors when a person clicks on the button? I do not know jQuery, I have been told that it is the best thing to use for this.

Here is the code I have for the HTML part:

<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>

I am really new at coding so any kind of help would be appreciated!

like image 313
Sean6971 Avatar asked Apr 26 '13 16:04

Sean6971


People also ask

How can change background color of button click in jquery?

JavaScript Code:$("div"). on( "click", "button", function( event ) { $(event. delegateTarget ). css( "background-color", "green"); });

How do I change the color of a clicked button in CSS?

To change the background color of the button, use the CSS background-color property and give it a value of a color of your taste. In the . button selector, you use background-color:#0a0a23; to change the background color of the button.


2 Answers

Add this code to your page:

<script type="text/javascript">
$(document).ready(function() {
   $("input[type='submit']").click(function(){
      $(this).css('background-color','red');
    });
});
</script>
like image 196
Nelson Avatar answered Sep 20 '22 23:09

Nelson


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

Use class, Demo:- https://jsfiddle.net/BX6Df/

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

if you want to toggle the color each click, you can try this:- https://jsfiddle.net/SMNks/

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


.red
{
    background-color:red;
}

Updated answer for your comment.

https://jsfiddle.net/H2Xhw/

$('input[type="submit"]').click(function(){
    $('input[type="submit"].red').removeClass('red')
        $(this).addClass('red');
});
like image 27
PSL Avatar answered Sep 19 '22 23:09

PSL