0

別の入力に「男性」または「女性」を挿入するonclick関数を備えた2つのボタンを作成したいと思います。

2つのボタンには背景画像があり、クリックすると背景位置を変更する必要があります。両方のボタンを切り替える必要があります。

誰かがjavascriptまたはjqueryで解決策を提案できますか？

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

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

3 に答える 3

0

button-toggle-onボタンの切り替えられた背景位置を適用するcssクラス（）を作成します。次に、ボタンでボタン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');" />
于 2012-04-12T15:33:13.780 に答える
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フィドルデモ。

onclick次のメソッドを使用して、からjQueryの目立たないメソッドに移行することを強くお勧めしclick()ます。

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

JSフィドルデモ。

切り替えを可能にするには：

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

JSフィドルデモ。

または、より簡潔に：

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

JSフィドルデモ。

参照：

于 2012-04-12T15:26:39.390 に答える
0

http://jsfiddle.net/vFsXt/ jQueryを使用したソリューション、jsのインライン属性の使用は避けてください

于 2012-04-12T15:30:00.850 に答える