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

Question

我想构建两个具有onclick 功能的按钮，将“男性”或“女性”插入另一个输入。

这两个按钮有背景图片，点击时需要改变背景位置。我需要两个按钮来相互切换。

任何人都可以建议使用 javascript 或 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

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

Answer 3

创建一个 CSS 类 ( button-toggle-on)，为按钮应用切换的背景位置。然后在按钮onclick上切换类按钮。为此，首先需要打开一个。

<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');" />