Question

How to create a jQuery/javascript function to:

1. Insert its value into an input box (male/female)
2. Change its background and the background of its sibling button to show whether it’s active?

Here is my HTML for a start:

<input type="button" class="ts" id="female" onclick="???????????" />
<input type="button" class="ts" id="male"   onclick="???????????" />

<input class="req-string bx long" type="text" id="gender" name="gender" />

Answer 1

Here is an example which will direct you on the right path. It doesn’t do what you are asking, but you will get the idea.

The code below would disable the other button: if you click on “female” it will disable “male” and vice-versa.

$(function() {

  $('#female').click(function() {     

    // place text ("male" or "female") in an input 
    $('#gender').val('female');

    $('#female').css({background:'green'});
    $('#male').css({background:'red'});
  });

  $('#male').click(function() {      

    // place text ("male" or "female") in an input 
    $('#gender').val('male');

    // emulates the button being toggled
    $('#female').css({background:'red'});
    $('#male').css({background:'green'});
  });

});​