方法一：

<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. OpenCV学习笔记(12)——OpenCV中的轮廓

    什么是轮廓 找轮廓.绘制轮廓等 1.什么是轮廓 轮廓可看做将连续的点(连着边界)连在一起的曲线,具有相同的颜色和灰度.轮廓在形态分析和物体的检测和识别中很有用. 为了更加准确,要使用二值化图像.在寻找 ...

  2. 前端性能之Chrome的Waterfall

    浏览器根据HTML中外连资源出现的顺序,依次放入队列(队列),然后根据优先级确定向服务器获取资源的顺序.同优先级的资源根据HTML中出现的先后顺序来向服务器获取资源. 瀑布中各项内容的含义: 排队: ...

  3. LC 774. Minimize Max Distance to Gas Station 【lock，hard】

    On a horizontal number line, we have gas stations at positions stations[0], stations[1], ..., statio ...

  4. [SPSS]如何利用spss进行单侧检验

    根据网上经验来看,结论如下: 单双侧t检验,t值不变,p值除以2即为单侧p值.

  5. 阶段3 3.SpringMVC·_02.参数绑定及自定义类型转换_7 获取Servlet原生的API

    控制器里面获取常用的request对象或者Response对象. 想拿到谁, 就在参数上写上谁 再获取servletConetext并输出

  6. 性能测试的 Check List （不断更新中）

    1. 开发人员是否提交了测试申请?2. 测试对象是否已经明确?3. 测试范围是否已经明确?4. 本次不被测试的范围是否已经明确?5. 测试目标是否已经明确?6. 何时开始性能测试?7. 何时终止一轮性 ...

  7. Python 自动化

    一.Win32 GUI自动化测试模块: 1. pywinauto: 下载链接:http://sourceforge.net/projects/pywinauto/ 在线文档:http://pywina ...

  8. gimp怎么移动选取中的图像并创建图层

    gimp怎么移动选取中的图像并创建图层 https://jingyan.baidu.com/article/414eccf6bf4d6e6b431f0a3b.html 听语音 原创 | 浏览:1148 ...

  9. Spark内核源码解析

    1.spark内核架构常用术语 Application:基于spark程序,包含一个driver program(客户端程序)和多个executeor(线程) Driver Progrom:代表着sp ...

  10. Bootstrap+JSP实例学习笔记一.简单的带登录功能的首页

    前言 Bootstrap 是流行的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.源自于twiteer内部的开发框架. 当前(2019-05)最新版本是v3.3. ...