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

时间:2012-04-12 15:22:46

标签: javascript jquery onclick toggle

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

这两个按钮具有背景图像,单击时需要更改背景位置。我需要两个按钮互相切换。

任何人都可以使用javascript或jquery建议解决方案吗?

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

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

3 个答案:

答案 0 :(得分:0)

如果您必须使用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

参考文献:

答案 1 :(得分:0)

使用jQuery的

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

答案 2 :(得分:0)

创建一个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');" />