[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="images/edit.png"></a>
        <a href="javascript:void(0)" class="" title="删除" data-toggle="modal" data-target="#delete"><img src="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="images/edit.png"></a>
        <a href="javascript:void(0)" class="" title="删除" data-toggle="modal" data-target="#delete"><img src="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="images/edit.png"></a>
        <a href="javascript:void(0)" class="" title="删除" data-toggle="modal" data-target="#delete"><img src="images/delete.png"></a>
        <a href="javascript:void(0)" class="called unCalled" title="重置密码"></a>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

 

转载于:https://www.cnblogs.com/zhixi/p/5488641.html