方法一：

<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. [go]go环境安装-解决安装包不能访问golang.org问题

    安装go和vscode vscode插件列表选择go,安装即可,其他插件暂不安装 手动安装一些vscode配套的调试工具等 直接vscode-go,然后点下面的go-tools就能找到 go get ...

  2. 学习前端第一天心得体会（初步了解HTML5的新特性以及和HTML的区别）

    一.HTML5是什么? HTML5 是最新的 HTML 标准. HTML5 是专门为承载丰富的 web 内容而设计的,并且无需额外插件. HTML5 拥有新的语义.图形以及多媒体元素. HTML5 提 ...

  3. Python——作业12（选做）选中矩阵的每行或每列画出对应的折线图（python programming）

    import os import platform import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5 ...

  4. django在进行模板render（渲染）时，对传过来的是字典中包含字典应用方法

    网上自强学堂参考的 views.py def home(request): info_dict = {'site': u'自强学堂', 'content': u'各种IT技术教程'} return r ...

  5. mysql——查询语句——单表查询——（概念）

    一.基本查询语句 select的基本语法格式如下: select 属性列表 from 表名和视图列表 [ where 条件表达式1 ] [ group by 属性名1 [ having 条件表达式2 ...

  6. sqlalchemy orm 层面删除数据注意

    #encoding: utf-8 from sqlalchemy import create_engine,Column,Integer,String,Float,func,and_,or_,Text ...

  7. 中间消息件之 Solace（一） Solace的简介

    什么是Solace? Solace是一家加拿大注册的公司,总部设在安大略省渥太华. 成立于2001年. 这家公司一直致力于获取信息的艺术和科学,并提供世界上最灵活,最强大的数据移动平台. 背景 在信息 ...

  8. FTL2

    ABSTACT 1.NAND flash memory  (主要缺点): (1)partial page updates (2)general-purpose cache usually does n ...

  9. java.io.IOException 断开的管道 解决方法 ClientAbortException: java.io.IOException: Broken pipe

    今天公司技术支持的童鞋报告一个客户的服务不工作了,紧急求助,于是远程登陆上服务器排查问题. 查看采集数据的tomcat日志,习惯性的先翻到日志的最后去查看有没有异常的打印,果然发现了好几种异常信息,但 ...

  10. python 爬虫 urllib模块介绍

    一.urllib库 概念:urllib是Python自带的一个用于爬虫的库,其主要作用就是可以通过代码模拟浏览器发送请求.其常被用到的子模块在Python3中的为urllib.request和urll ...