jQuery --- 实现 checkbox 样式的单选框
早就想写点博客了 一直懒着动 最近发现一些写过的东西都不记得了,下决心把自己平时遇到的问题、得到的经验记录下来,希望能大家一点帮助
这是之前写的一个模态框 要求单选 但是 要求radio的默认样式 太难看了 就想用checkbox + js 自己把它改成单选框 如下:
html代码:
<div class="list-item">
<input type="checkbox" id="1" value="">
<label for="1">Dance of the Reed Pipes</label>
</div>
<div class="list-item">
<input type="checkbox" id="2" value="">
<label for="2">Dance of the Reed Pies</label>
</div>
<div class="list-item">
<input type="checkbox" id="3" value="">
<label for="3">Dance of the Reed Pipes</label>
</div>
<div class="list-item">
<input type="checkbox" id="4" value="">
<label for="4">Dance of the Reed Pipes</label>
</div>
<div class="list-item">
<input type="checkbox" id="5" value="">
<label for="5">Dance of the Reed Pipes</label>
</div>
js代码:
$(".list-item").click(function(){
$(".list-item").find("input[type='checkbox']").prop("checked", false);//每次点击前,将所有checkbox置为 未选中
var cobj = $(this).find("input[type='checkbox']");//当前点击的checkbox
cobj.prop("checked", true);//将当前点击的checkbox置为选中状态
//over
})
代码并不复杂 挺简单的 ,如果想获取点击的id,只要再加一句
var itemId = cobj.attr("id");
这样就可以了
jQuery --- 实现 checkbox 样式的单选框的更多相关文章
- 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)
原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1, ...
- jQuery实现checkbox(复选框)选中、全选反选代码
谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:复选框(Checkbox)和单选框(Radio)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery处理checkbox(复选框)是否被选中
现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能 ...
- vue2实现自定义样式radio单选框
先上效果 <div class="reply"> 主编已回复: <div class="radio-box" v-for="(ite ...
- 10个HTML5美化版复选框和单选框
单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...
- jquery模拟下拉框单选框复选Select,Checkbox,Radio
在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...
- 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val
具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...
- 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】
radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...
随机推荐
- IO流之字符流知识总结
字符流:读写字符的 顶级父类是Reader和Writer 操作流程 在Java中IO操作也是有相应步骤的,以文件操作为例,主要的操作流程如下: 使用File类打开一个文件 通过字节流或字符流的子类,指 ...
- JavaScript 浏览器类型及版本号
项目中偶尔用到判断浏览器类型及相关版本问题,现记录相关代码: function getBrowserVertion(userAgent) { var browserName, browserVersi ...
- 中文版microbit:TurnipBit显示动态滚动字符教程实例
随着当今社会的发展,社会的进步,家长们越来越忙碌,致使家长们在孩子成长过程中陪孩子的互动的时间越来越少,为此,TurnipSmart公司制作的一款MicroPython开发板--TurnipBit,这 ...
- 我的Python学习笔记(三):私有变量
一.私有变量的定义 在Python中,有以下几种方式来定义变量: xx:公有变量 _xx:单前置下划线,私有化属性或方法,类对象和子类可以访问,from somemodule import *禁止导入 ...
- [Spark内核] 第38课:BlockManager架构原理、运行流程图和源码解密
本课主题 BlockManager 运行實例 BlockManager 原理流程图 BlockManager 源码解析 引言 BlockManager 是管理整个Spark运行时的数据读写的,当然也包 ...
- python matplotlib 绘图基础
在利用Python做数据分析时,探索数据以及结果展现上图表的应用是不可或缺的. 在Python中通常情况下都是用matplotlib模块进行图表制作. 先理下,matplotlib的结构原理: mat ...
- 如何一条sql语句查找表中第二大值
例1: 一个Customer表,一个字段Value,现请问如何查到Value中第二大的值 select max(value) from Customer where value < (selec ...
- CSS属性:定位属性(图文详解)
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. CSS的定位属性有三种,分别是绝对定位.相对定位.固定定位. posit ...
- 内网IP无法访问
就是我们在3类地址中常见到内网的IP段. 10.0.0.0--10.255.255.255 172.16.0.0--172.31.255.255 192.168.0.0--192.168.255.25 ...
- Git知识总览(三) 分支的创建、删除、切换、合并以及冲突解决
前两篇博客集中的聊了git的一些常用命令,具体请参见<Git知识总览(一) 从 git clone 和 git status 谈起>.<Git知识总览(二) git常用命令概览> ...