javascript - 用两个按钮固定切换

Question

我需要更改我的代码，以便如果您单击同一个按钮两次，它将返回到原来的状态。

另外，页面加载时是否可以不选择男性？我试图弄清楚如何在加载时取消选中两个按钮。

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>

Answer 1

你没有在那个小提琴中包含 jQuery 库，它现在被添加了。

包裹在 $ready 函数中，移除了默认的男性选择；应用选择器并按预期更新您的“valval”。请参阅下面的更新小提琴：

编辑按要求更新。：

按照要求：

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

Answer 2

我采取了一种稍微不同的方法，并冒昧地清理了一些东西。

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