我需要更改我的代码,这样如果你点击同一个按钮两次,它将返回到它的原始状态 .
此外,页面加载时是否可以不选择男性?我试图找出如何在加载时取消选中这两个按钮 .
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);});
<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}
2 回答
我采取了一种略微不同的方法,并冒昧地清理了一些东西 .
http://jsfiddle.net/natedavisolds/Uksgq/4/
你没有在那个小提琴中包含jQuery库,现在已经添加了 .
包含在$ ready函数中,删除了默认的男性选择;应用选择器并按预期更新“valval” . 请参阅下面的更新小提琴:
Edit 按要求更新:
按照要求:
http://jsfiddle.net/B4XkL/3/