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

如果你必须这样做以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移动到jQuery的不显眼的方法，使用该方法click()：

​$('.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。

参考文献：

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

Answer 2

http://jsfiddle.net/vFsXt/溶液使用jQuery，避免使用内联属性为J​​S

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