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 ...
随机推荐
- redis 写入的时候报错
redis 写入报错 1)报错内容 Exception in thread "main" redis.clients.jedis.exceptions.JedisDataExcep ...
- 【练习】jQuery
作业要求: 参考下图,点击展示不同内容. 例: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 自学Aruba1.4-WLAN厂家魔力象限
点击返回:自学Aruba之路 1.4 自学Aruba1.4-WLAN厂家魔力象限 以下为2017<有线和无线局域网接入基础设施的魔力象限>报告: Aruba.cisco为无线领域 ...
- 数据对象转json与md5加密注意事项
项目中遇到将OC数据对象类型转化字符类型,然后进行MD5加密的技术流程,在转化字符数组到字符加密过程中遇到一些问题. 问题 转化后的字符进行md5加密,出现与服务器加密结果不匹配的情况 分析 在对代码 ...
- 不要错过iost币的免费派发机会
2013 年 ripple 币曾经进行免费派发,而现在瑞波币兑CNY价格最高曾经达到20元, 如果你错过了 ripple 币,就不要错过这次李笑来和徐小平等背书 iost 币的免费派发
- Mark下js最大精确整数范围,业务中出现的疑难bug
今天在跟后端联调中,偶然发现几个数据的id居然一样,我就询问了下后端这是什么情况,然而后端告诉我说并没有相同的id,于是开始一起排查问题. 排查中发现,从后端拿来的数据在浏览器控制台NetWork ...
- [已解决]pip安装包时报错:Read time out
有一些包在源在国外,因为某些原因,网络并不是很好,常常会发生Read time out安装失败的问题. 一般解决方法有:修改国内的安装源,如果能够获取只是慢的话,还有中比较懒的方法就是增加读取的时间. ...
- Django---->视图(View)
视图层之路由配置系统(views) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是以这种方式告诉Django,对于这个 ...
- Python中的数据类型以及他们的方法
数据类型: 1)int i = 100 print(i.bit_length()) ''' bit_length 1 0000 0001 1 2 0000 0010 2 3 0000 0011 2 2 ...
- 大数据Hadoop学习之搭建hadoop平台(2.2)
关于大数据,一看就懂,一懂就懵. 一.概述 本文介绍如何搭建hadoop分布式集群环境,前面文章已经介绍了如何搭建hadoop单机环境和伪分布式环境,如需要,请参看:大数据Hadoop学习之搭建had ...