固定切換兩個按鈕

Question

我需要更改我的代碼，以便如果您單擊同一個按鈕兩次，它將返回到它的原始狀態。

此外，頁面加載時是否可能沒有選擇男性？我試圖弄清楚如何在加載時取消選中兩個按鈕。

http://jsfiddle.net/B4XkL/（運行的jQuery）

$（ 「輸入[類型=按鈕]」）。單擊（函數（）{ $（ 「輸入[類型=按鈕]」）。removeClass（「按鈕肘節接通 「）; $ （本）.toggleClass（」 按鈕撥動式 「）;如果 （$（本）.hasClass（」 GNF「））varval = '女'; 否則varval = '男' ; $（「＃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函數中，刪除了默認的男性選擇;應用選擇器並按照預期更新您的「閥值」。請參閱下面的更新小提琴：

編輯更新的要求：

按照要求：

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

Answer 2

我參加了一個稍微不同的方式，冒昧地乾淨的東西了位。

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