[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来操 ...
随机推荐
- WPF绘制简单常用的Path
写代码出身的我们经常需要使用一些简单 但是不是规则图形的Path 但限于美工功底有限 不知道怎么去画 下面我告诉大家一些简单的小技巧 用代码来画Path 个人还是比较喜欢用代码 因为数值控制的更精细 ...
- ionic angularJS input 相关指令 以及定时器 的使用
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conte ...
- C#、ASP.NET获取当前应用程序的绝对路径,获取程序工作路径 (转帖)
C#.ASP.NET获取当前应用程序的绝对路径,获取程序工作路径 ============================================ 使用 Application.Start ...
- HIbernate的property-ref属性
为公司之前的一个公交卡系统修改bug: 通过排查发现, 卡类型表和卡等级表是一对多的关系, 但是卡等级表中没有字段引用卡类型表的主键,而是引用了卡类型表中非主键的另外两个字段 通过查看hibernat ...
- 前台checkbox复选框提交到后台处理
前台 <input type="hidden" id="tempString" name="tempString" /> < ...
- 自创yum源
这里我们用U盘装完系统以后,我们要是使用yum命令的话,我们是装不上包的 这个时候我们装系统的时候 [root@kz-002 Packages]# df -h Filesystem Size Used ...
- 使用powershell链接到Azure
一:针对传统的的Azure 的登陆界面: (ASM) 1. 正常来说是 现在本地创建证书文件,然后上传文件,以便本地计算机和Azure建立可靠的安全连接 Get-AzurePublishSetting ...
- Hadoop---Google MapReduce(转)
1. MapReduce是干啥的 因为没找到谷歌的示意图,所以我想借用一张Hadoop项目的结构图来说明下MapReduce所处的位置,如下图. Hadoop实际上就是谷歌三宝的开源实现,Hadoop ...
- web框架 之 Tornado
初识 Tornado : tornado web server 是使用python编写出来的一个轻量级.高可伸缩性和非阻塞IO的Web服务器软件,其特点是采用epoll非阻塞IO,相应快速,可处理数千 ...
- <<< html图片背景平铺
CSS背景图片平铺技巧 使用CSS来设置背景图片同传统的做法一样简单,但相对于传统控制方式,CSS提供了更多的可控选项,我们先来看看最基本的设置图片的方法.html代码: 代码如下: <divi ...