note：在html <input> 标签类中的checkbox实现单选效果。

在最近的开发项目中，客户要求使用小方格子实现“单选”功能，显然圆点的radio被out了，只能选择chckbox的方块样式，也在网上搜过，可能有点儿脑残，没有找到。

废话不多说直接上代码：

ps：只是一个简单的demo。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>checkbox实现单选效果</title>

    <script src="jquery-1.7.2.min.js"></script>

    <script>

        $(document).ready(function () {

            $('.sb').click(function () {

                var typeThis = typeof ($(this).attr("checked"));

                switch (typeThis) {

                    case "string":

                        if ($(this).attr("checked").toLowerCase()=="checked") {

                            $('.sb').each(function () {

                                $(this).removeAttr("checked");

                            });

                            $(this).attr("checked",true);

                        }

                        break;

                    case "undefined":

                        $('.sb').each(function () {

                            $(this).removeAttr("checked");

                        });

                        break;

                }

            });

        });

    </script>

</head>

<body>

    <input class="sb" type="checkbox" value="1"/>

    <input class="sb" type="checkbox" value="2" />

    <input class="sb" type="checkbox" value="3" />

    <input class="sb" type="checkbox" value="4" />

</body>

</html>

当然在case “undefined” 中的代码可有可无，大家可以试试

checkbox 实现单选效果（html）的更多相关文章

  1. element-ui Table表格结合CheckBox实现单选效果

    最近做项目遇到一个需求,需要实现一个表格的单选,由于项目使用的是element-ui.于是去看了表格的文档,确实有单选的方法,但是官方的单选是直接选中表格行,通过颜色来区分 看着效果不明显,实际需要一 ...

  2. ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果

    图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...

  3. ViewPagerWithViewDemo【ViewPager和View搭配以及演示获取里面的值和CheckBox单选效果】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下ViewPager和自定义布局view的搭配使用以及布局文件中单选效果.获取viewpager布局内部值的功能. 效果图 ...

  4. 多个互相有联系的checkbox的单选逻辑

    checkbox单选的状态逻辑,状态好的时候一下就写好了,状态不好的时候要调试比较久,当然主要是对其中的事件不太清楚. 先给出效果图吧. 然后给出代码, selectZhiFuBaoPay.setOn ...

  5. Android在listview添加checkbox实现单选多选操作问题

    android根据View的不同状态更换不同的背景http://www.eoeandroid.com/thread-198029-1-1.html android 模仿朋友网推出的菜单效果[改进版]h ...

  6. GridView控件中Checkbox实现单选

    在GridView控件中,第0列有放一个CheckBox控件,现想实现对CheckBox进行单选. 先看看效果: 在ASPX页面,可以这样做: 有一点注意的是需要使用OnRowCreated事件. 在 ...

  7. checkbox设置单选

    http://blog.sina.com.cn/s/blog_4550f3ca010137td.html $("*")  ‘表示获取所有对象   $("#XXX" ...

  8. ios UIButton设置单选效果，以及同时设置图片和标题

    一,设置单选效果 - (void)selectedBtnPress:(UIButton*)sender { //首先把原来按钮的选中效果消除 for (int i=0;i<num;i++) {/ ...

  9. Android在listview添加checkbox实现单选多选操作问题（转）

    转自:http://yangshen998.iteye.com/blog/1310183 在Android某些开发需求当中,有时候需要在listveiw中加入checkbox实现单选,多选操作.表面上 ...

随机推荐

  1. php环境安装及搭建

    最近由于项目需要 转战 PHP .  在做了差不多两年java后 说实话看php代码还是有些难受的. 毕竟不习惯.废话不说 先说一下 PHP环境的部署等等,也就是最近几天学习的心得吧.方便以后参考. ...

  2. c# 大量拼接xml时内存溢出解决方法

    public static string SelectUNnormalPriceSTrans(EUNnormalPriceS rqInfo) { string guidStrJianJclFirst ...

  3. coredata中谓词的使用

    Cocoa提供了一个类NSPredicate类,该类主要用于指定过滤器的条件,该对象可以准确的描述所需条件,对每个对象通过谓词进行筛选,判断是否与条件相匹配.谓词表示计算真值或假值的函数.在cocoa ...

  4. Codeforces 474D Flowers

    http://codeforces.com/problemset/problem/474/D 思路:F[i]=F[i-1]+(i>=K)F[i-k] #include<cstdio> ...

  5. qt之窗口换肤（一个qss的坑：当类属性发现变化时需要重置qss，使用rcc资源文件）

    1.相关文章 Qt 资源系统qt的moc,uic,rcc命令的使用 2.概要    毕业两年了,一直使用的是qt界面库来开发程序,使用过vs08.10.13等开发工具,并安装了qt的插件,最近在做客户 ...

  6. NSIS脚本根据操作系统版本动态决定默认安装目录

    问题描述: 因为windows XP和windows 7的program files不同(有program files(x86)),所以需要动态根据系统的位数设置默认安装目录 References: ...

  7. ofbiz ins

  8. 【转】PF_NETLINK应用实例NETLINK_KOBJECT_UEVENT具体实现－－udev实现原理

    相对于linux来说,udev还是一个新事物.然而,尽管它03年才出现,尽管它很低调(J),但它无疑已经成为linux下不可或缺的组件了.udev是什么?它是如何实现的?最近研究Linux设备管理时, ...

  9. C#开发客户端、JAVA和tomcat开发服务端

    hessian入门,Hello和文件上传范例,C#客户端+Java Tomcat后台 2.Hello范例1)后台--定义Java接口:package org.migle.hessian; public ...

  10. pyqt信号事件相关网址说明及python相关

    pyqt在线文档: http://www.rzcucc.com/search/pyqt.sourceforge.net/Docs/PyQt4/-qdatetime-2.html PyQT信号槽_学习笔 ...