js——单选框radio
页面:
...
<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的更多相关文章
- 自定义单选框radio样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery单选框radio绑定click事件实现和是否选中的方法
使用jquery获取radio的值,最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项: 1. ...
- jquery单选框radio绑定click事件实现方法
本文实例讲述了jquery单选框radio绑定click事件实现方法.分享给大家供大家参考. 具体实现方法如下: 复制代码代码如下: <html><head><title ...
- 单选框radio改变事件详解(用的jquery的radio的change事件)
单选框radio改变事件详解(用的jquery的radio的change事件) 一.总结 1.用的jquery的radio的change事件:当元素的值发生改变时,会发生 change 事件,radi ...
- 吾八哥学Selenium(三):操作复选框checkbox/单选框radio的方法
复选框checkbox和单选框radio是web网站里经常会使用到的两个控件,那么在web自动化测试的时候如何利用Selenium来操作这俩控件呢?今天我们就来简单入门练习一下! html测试页面代码 ...
- MFC学习单选框Radio使用
创建单选框Radio ,ID号IDC_RADIO_NAME 1.获取单选框内容 int RadioState = ((CButton *)GetDlgItem(IDC_RADIO_NAME))-> ...
- 单选框radio总结(获取值、设置默认选中值、样式)
单选框 radio <div class="radio-inline"> <input type="radio" name="kil ...
- 微信小程序:单选框radio和复选框CheckBox
单选框radio: 可以通过color属性来修改颜色. 复选框checkbox:
- Js、layui获取单选框radio的几种方法
首先,编写HTML如下: <form id="form1"> <table border="0"> ...
随机推荐
- Java基础之在窗口中绘图——渐变填充(GradientApplet 1)
Applet程序. import javax.swing.*; import java.awt.*; import java.awt.geom.*; @SuppressWarnings("s ...
- Scala 环境搭建
下载安装包 1,)下载java jdk,推荐jdk1.8; 2,)下载scala安装包:http://www.scala-lang.org/; 3,)下载IDE:ide可以选择两种: 3.1,)Sca ...
- Scrum 项目7.0
一.内容 1.回顾组织 主题:“我们怎样才能在下个sprint中做的更好?” 时间:设定为1至2个小时. 参与者:整个团队. 场所:能够在不受干扰的情况下讨论. 秘书:指定某人当秘书,筹备.记录.整理 ...
- 数据库的点数据根据行政区shp来进行行政区处理,python定时器实现
# -*- coding: utf-8 -*- import struct import decimal import itertools import arcpy import math impor ...
- TCP/IP 协议介绍
转自http://blog.jobbole.com/104886/ 一.TCP/IP 协议介绍 在介绍 HTTP 协议之前,先简单说一下TCP/IP协议的相关内容.TCP/IP协议是分层的,从底层至应 ...
- 芯航线FPGA学习套件之多通道串行ADDA(TLV1544,TLC5620)模块测试手册
芯航线FPGA学习套件之多通道串行ADDA模块测试手册 本手册以简明扼要的方式介绍芯航线FPGA学习套件提供的ADDA模块的测试方法: 连接开发板,如下所示: 2.将ADDA V1.1模块与开 ...
- Prince2是怎么考试的?
Prince2是怎么考试的? 在前几年,对于项目经理来讲关注的很多是单项目管理的工具技术模板,谈论最多的是,进度延期,成本超支,范围蔓延等等!有一个不成文的形态就是--去考个PMP吧!一时间PMP成为 ...
- js加密的密文让PHP解密(AES算法)
JS加密代码如下 <script src="http://crypto-js.googlecode.com/svn/tags/3.0.2/build/rollups/aes ...
- JAVA线程锁lock下Condition高级使用-多个Condition的整合使用
import java.util.concurrent.locks.Condition; import java.util.concurrent.locks.Lock; import java.uti ...
- 十八、AWT绘图技术
1.Graphics 实现各类图形.文本和图片的绘制操作. 2.绘图颜色和笔画属性 (1)颜色属性 Color col= new Color(int r,int g,int b) Color col ...