0

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

また、ページの読み込み時に男性を選択しないことはできますか？ロード時に両方のボタンのチェックを外す方法を見つけようとしています。

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

$（ "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）;}）; </ p> 

<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}

</ p>

4

2 に答える 2

0

私は少し異なるアプローチを取り、物事を少しきれいにするために自由を取りました。

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

于 2012-04-13T02:36:38.380 に答える
0

そのフィドルにjQueryライブラリを含めていませんでしたが、現在追加されています。

$ ready関数にラップされ、デフォルトの男性の選択を削除しました。セレクターを適用し、意図したとおりに「valval」を更新します。以下の更新されたフィドルを参照してください。

要求に応じて更新を編集します。：

要求に応じて：

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

于 2012-04-13T01:08:01.487 に答える