的onclick功能将数据插入到与切换输入字段

我想建立与将插入“男”或“女”到另一个输入一个onclick功能两个按钮。

这两个按钮有背景图像,需要点击时改变背景位置。 我需要两个按键可相互切换。

任何人都可以提出与JavaScript或jQuery的解决方案?

<input type="button" class="gnM" onclick="???????"> <input type="button" class="gnF" onclick="???????"> <input class="req-string gender" id="gender" name="gender">

--------------解决方案-------------

如果你必须这样做具有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" />

JS提琴演示。

我强烈建议从移动onclick到jQuery的不显眼的方式,使用click()方法:

​$('.gnM').click(
function(){
var that = $(this);
$('#gender').val(that.val());
that.css('background-position','bottom right');
});​​​​​​

JS提琴演示。

要允许用于切换:

$('.gnM').click(
function(){
var that = $(this);
$('#gender').val(that.val());
that.siblings().removeClass('active');
that.toggleClass('active');
});​

JS提琴演示。

或者,更简洁:

$('.gnM').click(
function(){
var that = $(this);
$('#gender').val(that.val());
that.toggleClass('active').siblings().removeClass('active');
});​

JS提琴演示。

参考文献:

  • click()
  • css()
  • removeClass()
  • siblings()
  • toggleClass()
  • val()

http://jsfiddle.net/vFsXt/使用jQuery的解决方案,避免使用内联属性,JS

创建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');" />

分类:JavaScript的 时间:2012-01-01 人气:0
分享到:

相关文章

  • 水平滚动的div的onclick JavaScript或jQuery的 2013-12-30

    我花了最后两天为寻找这一个简单的JavaScript或jQuery代码. 我想用JavaScript或jQuery来显示图像和说明性文字对我的网络营销组合的工作页面纳入一个水平滚动股利. 它将功能非常相似,这里显示的滑翔的onclick滚动:http://www.dyn-web.com/code/scroll/demos.php#horiz不幸的代码许可是$ 40,我是一个身无分文的学生. 在页面加载,三组合图像将显示. 附加功能都隐藏在溢出的权利. 左箭头(我可以创造)的ONCLICK,新的图

  • JavaScript的:改变的onclick的值有或无的jQuery 2014-10-14

    我想改变的值onclick一个锚属性. 我想将其设置为包含JavaScript的一个新的字符串. (该字符串被提供给客户端的JavaScript代码的服务器,它可以包含任何你可以把在onclick的HTML属性.)这里有几件事情我尝试: 使用jQuery attr("onclick", js)不与Firefox和IE6 / 7的工作. 使用setAttribute("onclick", js)适用于Firefox和IE8,但不是IE6 / 7. 使用onclick

  • 在Javascript或jQuery的对象输出列表 2012-07-17

    我有对象名单 [ {name: "Dan", age: 25, desc: "description"}, {name: "Mary", age: 15, desc: "description"}, {name: "Tom", age: 18, desc: "description"} ] 我想打印出来像这样把它分成两列,说明在它们下面. 点击每个名称显示在列表下面的一些描述. Dan

  • 我怎样才能以像素为单位默认字体大小使用JavaScript或JQuery的? 2012-07-21

    正如你所知道的EM是一个相对字体测量其中一个em就等于默认字体大小字母"M"的高度. 在使用它的优点是,因为你将能够调整文本. 但是,我怎么能使用的JavaScript或JQuery的获取当前环境(像素)的默认字体大小? 问候, --------------解决方案------------- 有一对夫妇的情况下,这可能是useful- function getDefaultFontSize(pa){ pa= pa || document.body; var who= document.

  • 编码在JavaScript:标准JavaScript和jQuery的组合? 任何问题? 2013-01-05

    在那里我的混合标准的javascript和jQuery代码的任何问题? 事情会不会发生冲突? 我将无法jQuery的通话中使用标准的JavaScript? --------------解决方案------------- jQuery的是JavaScript框架 这意味着,如果你使用jQuery,你在同一时间使用JavaScript. 所以 ,不,不会有任何问题,如果你把JavaScript的已经使用jQuery里面的代码,因为你没有添加新的/有冲突的. 因为你已经在使用自己的代码中的JavaSc

  • 在IE中清除选定的选项JavaScript或jQuery的 2013-01-27

    想象一下HTML代码 <html> <head> <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> function clear_form() { $("select#block_id")

  • 创建的.ics使用JavaScript或jQuery的飞文件? 2013-03-12

    谁能告诉我,如果有任何的jQuery插件动态创建从页面DIV值来一样会有值的.ics文件 <div class="start-time">9:30am</div> <div class="end-time">10:30am</div> <div class="Location">California</div> 或JavaScript的方式动态创建的.ics文件? 基本上,我

  • 是否有可能取代表格单元格没有JavaScript或jQuery的删除呢? 2013-03-18

    是否有可能取代表格单元格没有JavaScript或jQuery的删除呢? 例如,如果我有一个表几行中,具有5个细胞每行,可以更改第一行的第一个单元,通过分配代替除去细胞,然后插入一个新的? 编辑(简体): <table> <tr id="currentRowId1" name="currentRowId1"> <td style="text-align:center"> </td> <td s

  • JavaScript的变化类的onclick 2013-06-05

    我只是试图让使用JavaScript / AJAX / jQuery的因此Im建设票系统为我的网站交手. 无论如何,我有在页面的顶部的表; <table align="center" class="thinline" width="600" border="1" cellpadding="2" bordercolor="black"> <tr class="s

  • 图像缩放使用javascript或jquery的 2013-10-09

    我需要一些代码来放大图像,当我鼠标移到这个形象,我想放大的图像. 考虑我y中第10页图像,当我把鼠标悬停在第一个图像的图像应该放大,当我MOV的第二个第二图像应放大这样的... 我怎么能做到这一点,需要一些JavaScript或jQuery的类似that.But不sure.how我能做到这一点? 请帮我 --------------解决方案------------- 这个页面做了非常相似. 你必须点击图片可放大它,这可能是最好只是弹出当你把鼠标移到它. 处理OnClick事件的功能是hs.exp

Copyright (C) 55228885.com, All Rights Reserved.

55228885 版权所有 京ICP备15002868号

processed in 0.428 (s). 10 q(s)