js——单选框radio

时间:2022-08-22 01:59:44
页面:
...
<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>
...

js——单选框radio

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

误区:一直以为,只要是选中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&lpar;三&rpar;:操作复选框checkbox&sol;单选框radio的方法

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

  6. MFC学习单选框Radio使用

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

  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. Java - IDE

    JDK安装及环境变量配置 下载安装对应版本的JDK 控制面板--->系统--->属性--->高级系统设置--->环境变量 新建系统变量JAVA_HOME 变量名:JAVA_HO ...

  2. POJ1741&colon;tree

    传送门 时隔一个月再次写点分治,比上一次要深入理解很多了.(虽然代码还是写不熟 模板题,不多说 //POJ 1741 //by Cydiater //2016.9.22 #include <cs ...

  3. linux 中文件夹的文件按照时间倒序或者升序排列

    1,按照时间升序 命令:ls -lrt 详细解释: -l use a long listing format 以长列表方式显示(详细信息方式) -t sort by modification time ...

  4. Windows平台下Python2&period;7中pip的安装方法

    本文允许转载,转载请保留全文! [请先阅读][说明&总目录]http://www.cnblogs.com/tbcaaa8/p/4415055.html 1. 文件下载 需要下载并运行ez_se ...

  5. ADO&period;NET改进版

    ADO.NET从概念上来说是指定义一种与数据源进行交互的面向对象类库.类库即类的集合,也就是说ADO.NET主要是提供一了一些实现与数据源进行交互的一些类和接口. 其实就我个人看来,我觉得ADO.NE ...

  6. Android平台调用Web Service:演示样例

    近期在学习Android,随着移动设备的流行,当软件走上商业化的道路,为了争夺市场,肯定须要支持Android的,所以開始接触了Android,只是仅仅了解皮毛就好,由于我们要做管理者嘛,懂点Andr ...

  7. 推荐一个比较好的VBS编辑器

    QTP 本身的IDE环境, 有诸多缺陷.所以,一般中级以上的自动化测试工程师都会采用外部其他编辑器来编辑VBS脚本.通常情况下,一般都 notepad++. 但是,notepad++也是有很多不足之处 ...

  8. openstack学习-创建一台云主机(七)

    一.创建基础环境 1.检查网络是否正常 [root@linux-node1 ~]# openstack network agent list +---------------------------- ...

  9. &lbrack;Android&rsqb; 旋转照片&sol;图片

    今天比较闲(是任务做完了,不是偷懒),就多更新几篇,补一下之前做的东西. 原文地址请保留http://www.cnblogs.com/rossoneri/p/3995306.html 推荐阅读: An ...

  10. 依赖注入(DI)在PHP中的实现

    什么是依赖注入? IOC:英文全称:Inversion of Control,中文名称:控制反转,它还有个名字叫依赖注入(Dependency Injection,简称DI). 当一个类的实例需要另一 ...