我想构建两个带有 onclick功能的按钮,将“男性”或“女性”插入另一个输入。
这两个按钮具有背景图像,单击时需要更改背景位置。我需要两个按钮互相切换。
任何人都可以使用javascript或jquery建议解决方案吗?
<input type="button" class="gnM" onclick="???????">
<input type="button" class="gnF" onclick="???????">
<input class="req-string gender" id="gender" name="gender">
答案 0 :(得分:0)
如果您必须使用onclick
执行此操作,那么我建议:
<input type="button" class="gnM" onclick="$('#gender').val($(this).val())" value="male" />
<input type="button" class="gnM" onclick="$('#gender').val($(this).val())" value="female" />
我强烈建议使用onclick
方法从click()
转换为jQuery不引人注意的方法:
$('.gnM').click(
function(){
var that = $(this);
$('#gender').val(that.val());
that.css('background-position','bottom right');
});
允许切换:
$('.gnM').click(
function(){
var that = $(this);
$('#gender').val(that.val());
that.siblings().removeClass('active');
that.toggleClass('active');
});
或者,更简洁:
$('.gnM').click(
function(){
var that = $(this);
$('#gender').val(that.val());
that.toggleClass('active').siblings().removeClass('active');
});
参考文献:
答案 1 :(得分:0)
http://jsfiddle.net/vFsXt/解决方案,避免使用js的内联属性
答案 2 :(得分:0)
创建一个css类(button-toggle-on
),它应用按钮的切换背景位置。然后在按钮onclick
中切换按钮上的类。要实现这一点,最初需要进行切换。
<input type="button" class="gnM button-toggle-on" onclick="$('#gender').val('male'); $('.gnF, .gnM').toggleClass('button-toggle-on');" />
<input type="button" class="gnF" onclick="$('#gender').val('female'); $('.gnF, .gnM').toggleClass('button-toggle-on');" />