用两个按钮固定切换 [英] Fixing toggle with two buttons

问题描述

我需要更改我的代码，这样如果你点击同一个按钮两次，它将返回到它的原始状态。

I need to change my code so that if you click on the same button twice, it will return back to it's original state.

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

Also, is it possible to not have the male selected when the page loads? I'm trying to figure out how to make both buttons unchecked when loaded.

http://jsfiddle.net/B4XkL/ （运行jQuery）

http://jsfiddle.net/B4XkL/ (Run 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）;
}）;

$("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); }); ​

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

推荐答案

你没有把jQuery库包含在那个小提琴里，现在已经添加了。

You didn't include the jQuery library in that fiddle, it's added now.

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

Wrapped in the $ready function, removed default male selection; applying selectors and updating your 'valval' as intended. Please see the updated fiddle below:

修改按要求更新。：

根据要求：

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

这篇关于用两个按钮固定切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！