zoukankan      html  css  js  c++  java
  • 复选框实现单选效果js/jq

    方法一:

    <input type="checkbox" name="test" onclick="checkedThis(this);">1
    <input type="checkbox" name="test" onclick="checkedThis(this);">2
    <input type="checkbox" name="test" onclick="checkedThis(this);">3
    <input type="checkbox" name="test" onclick="checkedThis(this);">4
    <input type="checkbox" name="test" onclick="checkedThis(this);">5
    <script>
    function checkedThis(obj){
    var boxArray = document.getElementsByName('test');
    for(var i=0;i<=boxArray.length-1;i++){
    if(boxArray[i]==obj && obj.checked){
    boxArray[i].checked = true;
    }else{
    boxArray[i].checked = false;
    }
    }
    }
    </script>

    方法二:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
    </head>
    <body>
    <table class="table table-hover"><tbody><tr class="unread"><td class="check-mail"><input type="checkbox" value="590c6af88838be1268cc1866"></td> <td>主管</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="591181599f82f91770b367f5"></td> <td>经理</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="591184209f82f91770b367f6"></td> <td>助理</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="591184269f82f91770b367f7"></td> <td>行政</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="591190079f82f91770b36800"></td> <td>科长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2d79f82f91770b3680b"></td> <td>班长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2dc9f82f91770b3680c"></td> <td>组长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2e19f82f91770b3680d"></td> <td>队长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2e69f82f91770b3680e"></td> <td>团长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5911b2eb9f82f91770b3680f"></td> <td>军长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="59127536a07ead322cabc996"></td> <td>懂事长</td></tr><tr class="unread"><td class="check-mail"><input type="checkbox" value="5912753ea07ead322cabc997"></td> <td>董事长</td></tr></tbody></table>
    <ul>
    <li><input type="checkbox">1</li>
    <li><input type="checkbox">2</li>
    <li><input type="checkbox">3</li>
    <li><input type="checkbox">4</li>
    <li><input type="checkbox">5</li>
    </ul>
    <script>
    $(function(){
    $(":checkbox").click(function(){
    if($(this).attr("checked")!=undefined)
    {
    $(this).parent('td').parent('tr').siblings('tr').children('td').children('input').attr("checked",false);
    $(this).attr("checked",true);
    }
    });
    });
    </script>

    </body>
    </html>
  • 相关阅读:
    Zabbix 添加内存告警
    Oracle Drop 表数据恢复
    Kubernetes port-forward
    Jenkins指定tag发布到k8s环境
    Jenkins系列之六——拉取指定branch或tag
    MySQL5.7 报错 ERROR 1820 (HY000): You must reset your password using ALTER USER statement before executing this statement
    docker部署常见应用
    Vim 中进行文件目录操作
    Oracle使用expdp/impdp迁移数据
    UmengAppDemo【友盟统计SDK集成以及多渠道打包配置,基于V7.5.3版本】
  • 原文地址:https://www.cnblogs.com/cx709452428/p/js.html
Copyright © 2011-2022 走看看