页面:
...
<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. 配置MyBatis

    创建WebProject之后先把mybatis-3.2.2.zip里的mybatis-3.2.2.jar包和lib里的asm-3.3.1.jar.cglib-2.2.2.jar.commons-log ...

  2. windows环境下Django安装配置

    --python下载 https://www.python.org/downloads/ --pip 下载 https://pypi.python.org/pypi/pip --pip 安装及路径 解 ...

  3. mongodb备份与恢复

    一.备份:mongodump -d mailaccess -c Mail -q ‘{user:”zhaoxy1@szdep.com”}’ -o /data/dump备份mailaccess datab ...

  4. animation 的属性一共有 6 个值,详细介绍在此

    animation 属性是一个简写属性,用于设置六个动画属性: animation-name animation-duration animation-timing-function animatio ...

  5. Qt5程序参数包含中文GBK编码的问题

    1.背景 Qt5程序(WeekReport.exe)的main函数里有如下代码: //only for test int main(int argc, char *argv[]) { QCoreApp ...

  6. :last-child

    匹配最后一个子元素 :last只匹配最后一个元素,而此选择符将为每个父元素匹配最后一个子元素 示例 描述: 在每个 ul 中查找最后一个 li HTML 代码: <ul> <li&g ...

  7. 使用boost的asio,io_service无法初始化

    今天用vs编一个用asio写的程序,发现在tcp::acceptor::open()失败,查了好久,发现是acceptor绑定的io_service没有正确的初始化,又查了半天,发现是需要加一个预编译 ...

  8. 161216、使用spring的DefaultResourceLoader自定义properties文件加载工具类

    import java.io.IOException; import java.io.InputStream; import java.util.NoSuchElementException; imp ...

  9. Python—进程、线程、协程

    一.线程 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 方法: ...

  10. 2016年12月17日 星期六 --出埃及记 Exodus 21:12

    2016年12月17日 星期六 --出埃及记 Exodus 21:12 "Anyone who strikes a man and kills him shall surely be put ...