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

如果您必须使用onclick执行此操作，那么我建议：

<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

我强烈建议使用onclick方法从click()转换为jQuery不引人注意的方法：

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

JS Fiddle demo

允许切换：

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

JS Fiddle demo

或者，更简洁：

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

JS Fiddle demo

参考文献：

Answer 2

使用jQuery的

http://jsfiddle.net/vFsXt/解决方案，避免使用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');" />

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

3 个答案: