zoukankan      html  css  js  c++  java
  • [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>
  • 相关阅读:
    LeetCode: Binary Search Tree Iterator 解题报告
    LeetCode: Search Insert Position 解题报告
    LeetCode: Search a 2D Matrix 解题报告
    LeetCode: Distinct Subsequences 解题报告
    LeetCode: Pascal's Triangle II 解题报告
    LeetCode: Pascal's Triangle 解题报告
    LeetCode: Valid Palindrome 解题报告
    LeetCode: Palindrome 回文相关题目
    K8S使用入门-创建第一个容器
    Prometheus监控实战day2——监控主机和容器
  • 原文地址:https://www.cnblogs.com/zhixi/p/5488641.html
Copyright © 2011-2022 走看看