onclick機能を使用して入力フィールドにデータを挿入する

Question

onclick関数の2つのボタンを作成して、別の入力に「male」または「female」を挿入します。

2つのボタンには背景画像があり、クリックすると背景の位置を変更する必要があります。私はお互いにトグルするために両方のボタンが必要です。

誰もが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を。私は強くclick()メソッドを使用して、jQueryの邪魔にならない方法へonclickから移動することをお勧めしたい

：

​$('.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()。 jQueryのを使用して

Answer 2

http://jsfiddle.net/vFsXt/ソリューションは、JS

Answer 3

のインライン属性を使用しないようにボタンの切り替えのbackground-positionを適用する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');" />