[jquery]模仿radio单项选择
今天写了个小功能,模仿radio单选,
//单选收货地址
$(".wuliu-table-to").find(".called").click(function(){
if($(this).hasClass("unCalled")){
$(this).removeClass("unCalled").addClass("onCalled");
$(this).parents("tr").siblings().find(".called").removeClass("onCalled").addClass("unCalled")
}else{
$(this).removeClass("onCalled").addClass("unCalled");
} });
.wl-called {text-align:center;}
.wl-called a{width:16px; height:16px; margin:0 10px; display:inline-block;}
.wl-called a img{display:block;width:16px; height:16px; vertical-align:top;}
.wl-called .called{ background:url(../images/called.png) no-repeat;}
.wl-called .unCalled{ background-position:-16px top;}
.wl-called .onCalled{background-position:left top;}
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table wuliu-table-to">
<colgroup>
<col class="col-xs-3">
<col class="col-xs-3">
<col class="col-xs-2">
<col class="col-xs-2">
<col class="col-xs-2">
</colgroup>
<tr>
<th scope="col">收货地址</th>
<th scope="col">详细地址</th>
<th scope="col">收货联系人</th>
<th scope="col">联系人手机</th>
<th scope="col">操作</th>
</tr>
<tr>
<td>上海市普陀区</td>
<td>***路***号306室</td>
<td>赵美丽</td>
<td>188666888</td>
<td class="wl-called clearfix">
<a href="javascript:void(0)" class="" title="编辑" data-toggle="modal" data-target="#edit"><img src="data:images/edit.png"></a>
<a href="javascript:void(0)" class="" title="删除" data-toggle="modal" data-target="#delete"><img src="data:images/delete.png"></a>
<a href="javascript:void(0)" class="called onCalled" title="重置密码"></a>
</td>
</tr>
<tr>
<td>上海市普陀区</td>
<td>***路***号306室</td>
<td>赵美丽</td>
<td>188666888</td>
<td class="wl-called clearfix">
<a href="javascript:void(0)" class="" title="编辑" data-toggle="modal" data-target="#edit"><img src="data:images/edit.png"></a>
<a href="javascript:void(0)" class="" title="删除" data-toggle="modal" data-target="#delete"><img src="data:images/delete.png"></a>
<a href="javascript:void(0)" class="called unCalled" title="重置密码"></a>
</td>
</tr>
<tr>
<td>上海市普陀区</td>
<td>***路***号306室</td>
<td>赵美丽</td>
<td>188666888</td>
<td class="wl-called clearfix">
<a href="javascript:void(0)" class="" title="编辑" data-toggle="modal" data-target="#edit"><img src="data:images/edit.png"></a>
<a href="javascript:void(0)" class="" title="删除" data-toggle="modal" data-target="#delete"><img src="data:images/delete.png"></a>
<a href="javascript:void(0)" class="called unCalled" title="重置密码"></a>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
[jquery]模仿radio单项选择的更多相关文章
- jQuery获取Radio选择的Value值||两个select之间option的互相添加操作(jquery实现)
jQuery获取Radio选择的Value值: 1. $("input[name='radio_name'][checked]").val(); //选择被选中Radio的Val ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- 《jQuery判断radio、checkbox、select 是否选中和设置选中问题以及获取选中值》总结
<form> <input type="radio" name="gender" id="man" value=" ...
- 【转】jQuery获取Select option 选择的Text和Value
获取一组radio被选中项的值:var item = $('input[name=items][checked]').val();获取select被选中项的文本:var item = $(" ...
- Jquery常用radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置
获取一组radio被选中项的值:var item = $('input[name=items][checked]').val(); 获取select被选中项的文本:var item = $(" ...
- jquery 获取Select option 选择的Text和Value
jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相关设置 获取一组radio被选中项的值:var item = $(' ...
- jQuery选择器的优化选择
jQuery选择器的优化选择 1.1 属性选择器 var $div=$("[id]"); 选中拥有该属性的元素 var $div=$("[id=div]"); ...
- JQuery基础教程:选择元素(中)
自定义选择符 JQuery在各种CSS选择符的基础上还添加了独有的完全不同的自定义选择符,注意,只要可能,jQuery就会使用浏览器原生的DOM选择符引擎去查找元素.但在使用自定义选择符的时候,就无法 ...
- 利用jquery操作Radio方法小结
用Radio来实现用户的选择效果,在项目中积累了一些利用JQUERY来操作Radio的方法,这里与大家分享下 在开发中经常会用到Radio来实现用户的选择效果,我在项目中积累了一些利用JQUERY来操 ...
随机推荐
- CSS选定第k个元素
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- Linux 下配置php开发环境
windows下有一键安装的环境很方便,不过现实中常常服务器是linux系统.想要搭建环境怎么搞呢? 边学变发直播博客,不定期更新.
- 线段树 HDU 3397
5种操作 具体看代码 #include<iostream> #include<stdio.h> #include<string.h> #include<alg ...
- hdu2874 LCA在线算法
Connections between cities Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (J ...
- redis-介绍与比较
<一>. NoSQL简介: NoSQL是Not-Only-SQL的缩写,是被设计用来替换传统的关系型数据库在某些领域的用,特别针对web2.0站点以及大型的SNS网站,用来满足高并发 ...
- phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接。您应该检查配置文件中的主机、用户名和密码
需要修改phpmyadmin的配置文件,让其连接到MySQL数据库,用记事本打开 config.inc.php 文件 <?php /* Servers configuration */ $i = ...
- gulp watch出现Error: watch null EPERM的问题解释
出现这样的问题,一般是第一次运行导致的,而且任务上有删除文件的操作. 我观察发现,只要把输出目录的文件删除,然后重新运行watch就一些ok,后者再运行一次gulp watch就一切正常.
- Alpha阶段第一次Scrum Meeting
Scrum Meeting Alpha 情况简述 Alpha阶段第一次Scrum Meeting 敏捷开发起始时间 2016/10/18 00:00 敏捷开发终止时间 2016/10/20 00: ...
- 错误信息:内存位置访问无效。 (Exception from HRESULT: 0x800703E6)
错误提示: 错误信息:内存位置访问无效. (Exception from HRESULT: 0x800703E6) 异常类型:System.BadImageFormatException 堆栈跟踪: ...
- UOJ#67. 新年的毒瘤
传送门 练习一下Tarjan的模板. 求一下割点,然后加个约束条件判一下特殊点,剩下的就是所求点. //UOJ 67 //by Cydiater //2016.10.27 #include <i ...