onclick函数可通过切换将数据插入输入字段

Question

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

Answer 1

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:

• click() .
• css() .
• removeClass() .
• siblings() .
• toggleClass() .
• val() .

Answer 2

使用jQuery的http://jsfiddle.net/vFsXt/解决方案，避免对js使用内联属性

Answer 3

Create a css class ( button-toggle-on ) that applies the toggled background-position for the buttons. Then in the button onclick toggle the class on the button. For this to work, one needs to be toggled on initially.

<input type="button" class="gnM button-toggle-on" onclick="$('#gender').val('male'); $('.gnF, .gnM').toggleClass('button-toggle-on');" /> 
<input type="button" class="gnF" onclick="$('#gender').val('female'); $('.gnF, .gnM').toggleClass('button-toggle-on');" />