页面:
...
<tr align="right">
<td align="right">会员性别:</td>
<td align="left">
<input type="radio" name="sex" id="sex1" size="20" value="1">男
<input type="radio" name="sex" id="sex2" size="20" value="2">女
</td>
</tr>
...

需求:点击性别时,变换不同的头像;

误区:一直以为,只要是选中radio的事件再给它附上相应的图片就行,于是起初是这样的:

...
if(jQuery("input[type='radio']:checked").val() == 1){
jQuery("#imgSrc").attr("src", "/static/admin/img/default_man.png");
} else {
jQuery("#imgSrc").attr("src", "/static/admin/img/default_woman.png");
}
...

可是事与愿违,任我怎样选,它也不会改变图片,这是什么原因呢?原因就是自己忘记给radio写单独的事件了,click()或者change()事件,以至于单选框怎样改变也不会让图片改变。最终就成了:

...
jQuery("input[type='radio']").change(function () {
if(jQuery("input[type='radio']:checked").val() == 1){
jQuery("#imgSrc").attr("src", "/static/admin/img/default_man.png");
} else {
jQuery("#imgSrc").attr("src", "/static/admin/img/default_woman.png");
}
});
...

这样,任你怎样点击性别,自动就会改变下面的默认头像。


js——单选框radio的更多相关文章

  1. 自定义单选框radio样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. jquery单选框radio绑定click事件实现和是否选中的方法

    使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...

  3. jquery单选框radio绑定click事件实现方法

    本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...

  4. 单选框radio改变事件详解(用的jquery的radio的change事件)

    单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...

  5. 吾八哥学Selenium(三):操作复选框checkbox/单选框radio的方法

    复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...

  6. MFC学习单选框Radio使用

    创建单选框Radio ,ID号IDC_RADIO_NAME 1.获取单选框内容 int RadioState = ((CButton *)GetDlgItem(IDC_RADIO_NAME))-> ...

  7. 单选框radio总结(获取值、设置默认选中值、样式)

    单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...

  8. 微信小程序:单选框radio和复选框CheckBox

    单选框radio: 可以通过color属性来修改颜色. 复选框checkbox:

  9. Js、layui获取单选框radio的几种方法

    首先,编写HTML如下:   <form id="form1">         <table  border="0">        ...

随机推荐

  1. Linux下使用shell实现上传linux下某个目录下所有文件到ftp

    首先我们需要搞清楚单个文件怎么上传,把这个单文件上传到ftp上的实现命名为一个:upload_to_ftp_command.sh 之后,需要弄清楚怎么实现遍历一个目录下的所有文件的,把这个遍历某个目录 ...

  2. YII2.0--------这篇文章记录我学习YII2.0的过程吧,也可以让更多的人少走弯路

    1.情况:今天我从github上下载了一个项目,本以为直接丢到根目录运行就行了,但是不行. 解决办法:首先安装git,安装步骤这里不讲了,稍微讲一下配置环境变量.

  3. .NET WebForm简介

    WebForm简介 微软开发的一款产品,它将用户的请求和响应都封装为控件.让开发者认为自己是在操作一个windows界面.极大地提高了开发效率. C/S(客户端) 主要是在本机执行(每一个客户端是独立 ...

  4. jquery-mobile之loading加载自定义

    用jquery-mobile的时候,我们发现文档中loading是直接通过标签属性进行渲染,封装的函数必须通过点击按钮才能执行.而实际运用中,我们的加载开始和结束可能不需要点击,而是通过某个函数调用直 ...

  5. RF《Quick Start Guide》操作总结

    这篇文章之所以会给整理出来,是因为学了一个季度的RF后,再去看官网的这个文档,感触破多,最大的感触还是觉得自己走了不少弯路,还有些是学习方法上的弯路.在未查看这类官网文档之前,更多的是看其他各种人的博 ...

  6. 一种比较少见的C#代码段

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  7. Spring 文章推荐

    spring mvc 异常统一处理方式:http://www.cnblogs.com/xd502djj/archive/2012/09/24/2700490.html 在springmvc中使用hib ...

  8. 引用参数,值参数,ref,out

    1,一个参数只有在引用的时候才能改变其值,这是一种情况 2,一个参数在引用后要永久的改变其值(可以用返回参数的形式) 3,多个参数在引用后要永久的改变其值或者多个参数中的部分(返回参数就适合了,因为只 ...

  9. 简单练习题2编写Java应用程序。首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”、“取款”和“余额查询”。其次, 编写一个主类,在主类中测试Account类的功能

    编写Java应用程序.首先定义一个描述银行账户的Account类,包括成员变 量“账号”和“存款余额”,成员方法有“存款”.“取款”和“余额查询”.其次, 编写一个主类,在主类中测试Account类的 ...

  10. JAVA基础知识之JDBC——JDBC事务处理及批量更新

    JDBC事务 JDBC的事务由Connection提供,默认是打开的. 要开启事务,则要关闭自动提交, conn.setAutoCommit(false); 提交事务使用 conn.commit(); ...