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 ...
随机推荐
- Java Web高级编程(四)
WebSocket 一.WebSocket的产生 用户希望Web页面可以进行交互,用于解决这个问题的技术是JavaScript,现在Web上有许多的可用的JavaScript框架,在使用极少的Java ...
- partition length exceeds the loop-partition-table-imposed maximum of 4294967295
问题: 当大于2T的磁盘,在用parted操作的时候,会出现这样的报错,原因是因为现在的分区表是mbr,需要修改为gpt.mbr最大支持2T的空间. 解决方法: 搞清楚问题,解决方法也很简单:mkla ...
- File System 之本地文件系统
上一篇文章提到了,最近做一个基于 File System/IndexedDB的应用,上一篇是定额和使用的查询. 因为LocalFileSystem只有chrome支持,有点尴尬,如果按需加载又何来尴尬 ...
- "软件随想录" 读书笔记
人员管理: 三种方法: 军事化管理方法, 经济利益驱动法, 认同法. 军事化管理方法不行. 经济利益驱动法也不行. 认同法, 其中一条建议是一起干活的人一起吃饭. 但这种做法比较困难. 设计的作用 寸 ...
- Python基础-*args和**kwargs魔法变量
在学习Python时,总会遇到*args和**kwargs这两个魔法变量,那么它们到底是什么? 首先,并不是必须写成*args和**kwargs.只有变量前面的*(星号)才是必须的,你也可以写成*va ...
- [转]Wing IDE 6.0 安装及算号器注册机代码
下载安装wing 选择第三个,运行算号器,输入license id 输入request id. Python 2 算号器注册机代码 import string import random import ...
- AspNet Core 核心 通过依赖注入(注入服务)
说起依赖注入 相信大家已经很熟悉了,这里我在简要的描述一遍, 什么是依赖注入: 我们从字面意义上来解释一下:依赖代表着两个或者多个对象之间存在某些特定的联系:举一个不是很恰当的例子 比如说一度夫妻组成 ...
- 大白话说Java泛型(一):入门、原理、使用
文章首发于[博客园-陈树义],点击跳转到原文<大白话说Java泛型(一):入门.原理.使用> 远在 JDK 1.4 版本的时候,那时候是没有泛型的概念的.当时 Java 程序员们写集合类的 ...
- 运维架构服务监控Open-Falcon
一. 介绍 监控系统是整个运维环节,乃至整个产品生命周期中最重要的一环,事前及时预警发现故障,事后提供翔实的数据用于追查定位问题.监控系统作为一个成熟的运维产品,业界有很多开源的实现可供选择.当公司刚 ...
- AWS上获取监控数据(EC2/RDS都支持)
方法1:mon-cmd http://docs.aws.amazon.com/zh_cn/AmazonCloudWatch/latest/cli/SetupCLI.html(安装连接) ● Step ...