checkbox 实现单选效果（html）
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）的更多相关文章
- element-ui Table表格结合CheckBox实现单选效果
最近做项目遇到一个需求,需要实现一个表格的单选,由于项目使用的是element-ui.于是去看了表格的文档,确实有单选的方法,但是官方的单选是直接选中表格行,通过颜色来区分 看着效果不明显,实际需要一 ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- ViewPagerWithViewDemo【ViewPager和View搭配以及演示获取里面的值和CheckBox单选效果】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 简单记录下ViewPager和自定义布局view的搭配使用以及布局文件中单选效果.获取viewpager布局内部值的功能. 效果图 ...
- 多个互相有联系的checkbox的单选逻辑
checkbox单选的状态逻辑,状态好的时候一下就写好了,状态不好的时候要调试比较久,当然主要是对其中的事件不太清楚. 先给出效果图吧. 然后给出代码, selectZhiFuBaoPay.setOn ...
- Android在listview添加checkbox实现单选多选操作问题
android根据View的不同状态更换不同的背景http://www.eoeandroid.com/thread-198029-1-1.html android 模仿朋友网推出的菜单效果[改进版]h ...
- GridView控件中Checkbox实现单选
在GridView控件中,第0列有放一个CheckBox控件,现想实现对CheckBox进行单选. 先看看效果: 在ASPX页面,可以这样做: 有一点注意的是需要使用OnRowCreated事件. 在 ...
- checkbox设置单选
http://blog.sina.com.cn/s/blog_4550f3ca010137td.html $("*") ‘表示获取所有对象 $("#XXX" ...
- ios UIButton设置单选效果，以及同时设置图片和标题
一,设置单选效果 - (void)selectedBtnPress:(UIButton*)sender { //首先把原来按钮的选中效果消除 for (int i=0;i<num;i++) {/ ...
- Android在listview添加checkbox实现单选多选操作问题（转）
转自:http://yangshen998.iteye.com/blog/1310183 在Android某些开发需求当中,有时候需要在listveiw中加入checkbox实现单选,多选操作.表面上 ...
随机推荐
- python学习第四天 --字符编码 与格式化及其字符串切片
字符编码 与格式化 第三天已经知道了字符串也是一种数据类型,但是,字符串比较特殊的是还有一个编码问题. 因为计算机只能处理数字,如果要处理文本,就必须先把文本转换为数字才能处理.最早的计算机在设计时采 ...
- 当list中有中文，打印的时候显示为字符编码的问题
当list中有中文时,print list显示的会是字符编码,比如: 用str()当然也不行: 在不安装其他包的情况下,目前我知道的解决办法是使用decode('string_escape'),如下:
- 在fedora 20下使用ssh server
在红帽和centos下,一般安装完后会自带ssh,然后可以通过/etc/init.d/sshd start的方式运行,但是在Fedora 20下,系统改用了另外一套服务开启机制. 首先安装ssh se ...
- Android provider authorities冲突
在Android项目中的AndroidManifest中provider的authorities相当于一个系统级的全局变量它的值必须唯一,如果有两个应用的authorities相同会导致安装失败.
- MySQL表复制
http://www.2cto.com/database/201202/120259.html http://www.cnblogs.com/sunss/archive/2010/10/08/1845 ...
- codechef Prime Distance On Tree（树分治+FFT）
题目链接:http://www.codechef.com/problems/PRIMEDST/ 题意:给出一棵树,边长度都是1.每次任意取出两个点(u,v),他们之间的长度为素数的概率为多大? 树分治 ...
- LeetCode_Longest Substring Without Repeating Characters
Given a string, find the length of the longest substring without repeating characters. For example, ...
- （转载）解决WPF动画属性锁死问题
此文来自: 马开东博客 转载请注明出处 网址:http://www.makaidong.com 一般锁死问题都是出在后台代码写的动画中,以下为转载的解决方案! 方法一:将动画的 FillBehavio ...
- ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传
最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使 ...
- sort详解
一. 简介 sort命令是帮我们依据不同的数据类型进行排序. 二. 语法 sort [-bcfMnrtk][源文件][-o 输出文件] 补充说明:sort可针对文本文件的内容,以行为单位来排序(默认为 ...