方法一：

<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>

复选框实现单选效果js/jq的更多相关文章

  1. 【三石jQuery视频教程】02.创建 FontAwesome 复选框和单选框

    视频地址:http://v.qq.com/page/m/8/c/m0150izlt8c.html 大家好,欢迎来到[三石jQuery视频教程],我是您的老朋友 - 三生石上. 今天,我们要通过基本的H ...

  2. 如何让checkbox复选框只能单选

    function框架div 如何让checkbox复选框只能单选 在项目开发中遇到一个这样的问题,要让一列复选框架在任何时间段内只能选择一个. 有人说怎么不用单选框了,因为单选框一旦选择了就不能取消选 ...

  3. Jquery学习笔记：操作form表单元素之二（复选框和单选框）

    在上面文章的基础上,我们介绍如何操作表单元素中的 复选框和单选框. 一.复选框 <label> <input type="checkbox" id="i ...

  4. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

  5. 纯css3实现美化复选框和手风琴效果（详细）

    关键技术点和原理: 原理就是把 checkbox或 radio 给隐藏掉   ,然后给选框 绑定一个label标签. 然后用label标签作为容器,在里面放一个:before或一个after 用bef ...

  6. CheckedListBoxControl 实现复选框的单选与多选功能

    由于工作需要,需要实现复选框的单选与多选功能,找了好多资料都不是很全,经过两天苦苦的挖挖挖,终于完成啦O(∩_∩)O哈哈~ 用DEV控件中的CheckedListBoxControl控件,当然VS中的 ...

  7. Bootstrap 表单和图片 （内联表单，表单合组，水平排列，复选框和单选框，下拉列表，校验状态，添加额外的图标，控制尺寸，图片）

    一．表单 基本格式 注:只有正确设置了输入框的 type 类型,才能被赋予正确的样式. 支持的输入框控件 包括:text.password.datetime.datetime-local.date.m ...

  8. 把复选框变成单选框(prop,attr的区别)

    如果项目中需要统一样式的话,有可能会遇到把复选框变成单选框的需求. 下面是用jquery的简单实现 $(function(){ $("input[type='checkbox']" ...

  9. 复选框、单选框样式自定义（https://www.cnblogs.com/freedom-feng/p/11346396.html）

    复选框.单选框样式自定义(https://www.cnblogs.com/freedom-feng/p/11346396.html)复选框html内容如下:<input type="c ...

随机推荐

  1. vue画图运用echarts

    <template> <div class="tubiao"> <div id="main" style="width: ...

  2. JavaScript中的普通函数和构造函数

    在写JavaScript代码过程中,用到需要写构造函数的地方不多,但还是需要详细了解一下 本文尽量描述清楚什么是JavaScript中的构造函数,以及普通函数和构造函数的区别

  3. 阶段3 3.SpringMVC·_06.异常处理及拦截器_2 SpringMVC异常处理之演示程序异常

    原来的index.jsp删除.新建一个 创建pages文件夹.再创建success.jsp页面 重新部署项目 把这个项目移除掉 加入新的项目 启动tomcat服务器 模拟异常 方法抛出异常给前端控制器 ...

  4. 六十五：CSRF攻击与防御之CSRF防御之form表单防御

    防御原理,将csrf_token放到session中,再将session放到cookie中 实现: from flask_wtf import CSRFProtect # flask_wtf 已经提供 ...

  5. js中的堆内存和栈内存

    我们常常会听说什么栈内存.堆内存,那么他们到底有什么区别呢,在js中又是如何区分他们的呢,今天我们来看一下. 一.栈内存和堆内存的区分 一般来说,栈内存主要用于存储各种基本类型的变量,包括Boolea ...

  6. MFC中png格式图片贴图的实现

    MFC中png格式图片贴图的实现(2011-07-14 19:10:29)  ___转载自新浪 初学vc,正在做五子棋,五子棋中的图片格式都是bmp格式的,所以贴图用CBitmap可以很简单的实现.刚 ...

  7. 重学Python - Day 06 - python基础 -> linux命令行学习 -- 简单基础命令学习

    学习资源 虚拟机工具:VMWare 12 linux :Ubuntu 14 或者CentOS 6 PS:ubuntu用远程连接工具的设置方法 step 1: 输入sudo apt-get instal ...

  8. Linux后台运行python程序并输出到日志文件

    后台运行python程序并标准输出到文件 现在有test.py程序要后台部署, 里面有输出内容 使用命令: nohup python -u test.py > test.log 2>&am ...

  9. （5.4）mysql高可用系列——MySQL异步复制（实践）

    关键词:mysql复制,mysql异步复制,mysql传统异步复制 [1]实验环境 操作系统:CentOS linux 7.5 数据库版本:5.7.24 数据库架构:主从复制,主库用于生产,从库用于数 ...

  10. python学习笔记四 （运算符重载和命名空间、类）

    从以上代码中应该了解到: obj.attribute  查找的顺序: 从对象,类组成的树中,从下到上,从左到右到查找最近到attribute属性值,因为rec中存在name的属性,所以x.name可以 ...