Question

I need to change my code so that if you click on the same button twice, it will return back to it’s original state.

Also, is it possible to not have the male selected when the page loads? I’m trying to figure out how to make both buttons unchecked when loaded.

http://jsfiddle.net/B4XkL/ (Run jQuery)

$(“input[type=button]”).click(function() {
$(“input[type=button]”).removeClass(“button-toggle-on”);
$(this).toggleClass(“button-toggle-on”);
if($(this).hasClass(“gnF”)) varval = ‘female’;
else varval = ‘male’;
$(“#gender”).val(varval);
});
​

<input type="button" class="gnF" />

<input class="req-string gender"  id="gender" name="gender">​

$("input[type=button]").click(function() {
$("input[type=button]").removeClass("button-toggle-on");
$(this).toggleClass("button-toggle-on");
if($(this).hasClass("gnF")) varval = 'female';
else varval = 'male';
$("#gender").val(varval);
});

.gnM  {width:137px;height: 60px;background:#E8E8E8 url('http://www.41q.org/admin/img/male.png') 0px 0px no-repeat;margin-top:15px;padding: 0;border: 0;margin-left: 0px;float: left;outline: none;text-align:center;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 105%;font-style:normal;color:#03F;}

.gnF  {width:137px;height: 60px;background:#E8E8E8 url('http://www.41q.org/admin/img/female.png') 0px 0px no-repeat;margin-top:15px;padding: 0;border: 0;margin-left: 0px;float: left;outline: none;text-align:center;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 105%;font-style:normal;color:#03F;}

.button-toggle-on    {background-position: 0 -120px}

​
​

Answer 1

You didn’t include the jQuery library in that fiddle, it’s added now.

Wrapped in the $ready function, removed default male selection; applying selectors and updating your ‘valval’ as intended. Please see the updated fiddle below:

Edit Updated as requested.:

As requested:

http://jsfiddle.net/B4XkL/3/