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>
  • 相关阅读:
    C#读取Excel文档
    用DataSet方式更新数据库表
    using(){},Close(),Dispose()的区别
    ADO.NET连接数据库的两种方式
    DateUtils
    GoF的23个经典设计模式
    react中需要用到【深度复制】的问题
    css区分ie8/ie9/ie10/ie11 chrome firefox的代码
    【个人学习笔记】走近H5
    【React入门实例(运行于浏览器duan)】
  • 原文地址:https://www.cnblogs.com/cx709452428/p/js.html
Copyright © 2011-2022 走看看