2つのボタンでトグルを固定

Question

同じボタンを2回クリックすると元の状態に戻るようにコードを変更する必要があります。

また、ページが読み込まれたときに男性を選択することはできませんか？私は両方のボタンをロードしたときにチェックを外す方法を理解しようとしています。

http://jsfiddle.net/B4XkL/（実行jQueryの）

$（ "入力[タイプ=ボタン]"）。（関数（）{ $（ "入力[タイプ=ボタン]"）。removeClass（「ボタントグルをクリックvar35 = 'female'; else varval = 'male'; ; varch = 'female'; if（$（this） ; $（ "＃gender"）。val（varval）; }）;

<input type="button" class="gnF" /> 

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

$("input[type=button]").click(function() { 
$("input[type=button]").removeClass("button-toggle-on"); 
$(this).toggleClass("button-toggle-on"); 
if($(this).hasClass("gnF")) varval = 'female'; 
else varval = 'male'; 
$("#gender").val(varval); 
}); 

.gnM {width:137px;height: 60px;background:#E8E8E8 url('http://www.41q.org/admin/img/male.png') 0px 0px no-repeat;margin-top:15px;padding: 0;border: 0;margin-left: 0px;float: left;outline: none;text-align:center;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 105%;font-style:normal;color:#03F;} 

.gnF {width:137px;height: 60px;background:#E8E8E8 url('http://www.41q.org/admin/img/female.png') 0px 0px no-repeat;margin-top:15px;padding: 0;border: 0;margin-left: 0px;float: left;outline: none;text-align:center;font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 105%;font-style:normal;color:#03F;} 

.button-toggle-on {background-position: 0 -120px} 

Answer 1

あなたはそれが今追加されます、そのフィドルにjQueryライブラリが含まれていませんでした。

$ ready関数でラップされ、デフォルトの男性選択が削除されました。セレクターを適用し、あなたの「valval」を意図通りに更新します。要求されるように編集し更新：

要求されたよう

：以下の更新フィドルを参照してください

http://jsfiddle.net/B4XkL/3/

Answer 2

を私は少し異なるアプローチを取って物事をクリーンアップするために自由を取りましたビット。

http://jsfiddle.net/natedavisolds/Uksgq/4/