Home/ Questions/Q 7793103
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T22:22:46+00:00

I would like to build two buttons with an onclick function that will insert

  • 0

I would like to build two buttons with an onclick function that will insert “male” or “female” into another input.

The two buttons have background images and need to change background-position when clicked. I need both buttons to toggle from each other.

Can anyone suggest a solution with javascript or jquery?

<input type="button" class="gnM" onclick="???????">
<input type="button" class="gnF" onclick="???????">

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you must do this with onclick then I’d suggest:

    <input type="button" class="gnM" onclick="$('#gender').val($(this).val())" value="male" />
<input type="button" class="gnM" onclick="$('#gender').val($(this).val())" value="female" />

    JS Fiddle demo.

    I’d strongly suggest moving from an onclick to a jQuery unobtrusive method, using the click() method:

    ​$('.gnM').click(
    function(){
        var that = $(this);
        $('#gender').val(that.val());
        that.css('background-position','bottom right');
    });​​​​​​

    JS Fiddle demo.

    To allow for toggling:

    $('.gnM').click(
    function(){
        var that = $(this);
        $('#gender').val(that.val());
        that.siblings().removeClass('active');
        that.toggleClass('active');
    });​

    JS Fiddle demo.

    Or, more concisely:

    $('.gnM').click(
    function(){
        var that = $(this);
        $('#gender').val(that.val());
        that.toggleClass('active').siblings().removeClass('active');
    });​

    JS Fiddle demo.

    References:

    • 0