早就想写点博客了 一直懒着动  最近发现一些写过的东西都不记得了,下决心把自己平时遇到的问题、得到的经验记录下来,希望能大家一点帮助

  这是之前写的一个模态框 要求单选 但是 要求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 样式的单选框的更多相关文章

  1. 可分组的选择框控件(MVVM下)(Toggle样式 仿造单选框RadioButton,复选框CheckBox功能)

    原地址: http://www.cnblogs.com/yk250/p/5660340.html 效果图如下:支持分组的单选框,复选框样式和MVVM下功能的实现.这是项目中一个快捷键功能的扩展. 1, ...

  2. jQuery实现checkbox(复选框)选中、全选反选代码

    谁都知道 在html 如果一个复选框被选中 是 checked="checked". 但是我们如果用jquery alert($("#id").attr(&qu ...

  3. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表单:复选框(Checkbox)和单选框(Radio)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jquery处理checkbox(复选框)是否被选中

    现在如果一个复选框被选中,是用checked=true,checked="checked"也行 要用prop代替attr会更好,虽然在jQuery1.6之前版本的attr()方法能 ...

  5. vue2实现自定义样式radio单选框

    先上效果 <div class="reply"> 主编已回复: <div class="radio-box" v-for="(ite ...

  6. 10个HTML5美化版复选框和单选框

    单选框Radiobox和复选框checkbox在网页中也十分常见,虽然它没有按钮的交互性强,但是如果能把它们像按钮那样美化一下,那也是非常不错的.本文收集了10个相对比较漂亮的美化版单选框和复选框,希 ...

  7. jquery模拟下拉框单选框复选Select,Checkbox,Radio

    在项目中,你会发现设计稿中常常会有单选框,复选框,但都不是系统默认的样式,这就可以用jquery来模拟它们:如图所示,实现它们所需要的代码如下: 首先需要引入的代码: <link rel=&qu ...

  8. 纯css美化下拉框、复选框以及单选框样式并用jquery获取到其被选中的val

    具体样式如图所示: 注:获取val值时记得要先引入jquery库奥. 1.下拉框 css部分 #cargo_type_id{ font-size: 13px; border: solid 1px #b ...

  9. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

随机推荐

  1. Head First设计模式之目录

    只有沉淀.积累,才能远航:沉沉浮浮,脚踏实地. 这本书已经闲置了好久,心血来潮,决定写个目录,让自己坚持看完这本书 创建型模式 抽象工厂模式(Abstract factory pattern): 提供 ...

  2. rpc之thrift

    rpc之thrift 一.介绍 thrift是一个rpc(remove procedure call)框架,可以实现不同的语言(java.c++.js.python.ruby.c#等)之间的相互调用. ...

  3. MyBatis单个多个参数传递

    一.传入单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList ...

  4. 解决myeclipse部署按钮不能点

    找到MyEclipse的工作路径(一般点开myeclipse是会显示),然后到这个目录中去“\.metadata\.plugins\org.eclipse.core.runtime\.settings ...

  5. 教你用.Net来玩微信跳一跳

    目前开发的所有代码都已经上传到了GitHub.欢迎大家来Star https://github.com/GiantLiu/AutoJump 目前程序分为“全自动版本”和“半自动版本” 全自动版本 We ...

  6. 【转1】Appium 1.6.3 在Xcode 8, iOS 10.2(模拟器)测试环境搭建 经验总结

    Appium 1.6.3 在Xcode 8, iOS 10.2(模拟器)测试环境搭建 经验总结 关于 Appium 1.6.3 在Xcode 8, 10.2 的iOS模拟器上的问题很多,本人也差点放弃 ...

  7. Linux常见命令(系统命令)

    1.查看主机名hostname 2.修改主机名(重启后无效)hostname hadoop 3.修改主机名(重启后永久生效)vi /etc/sysconfig/network[hostname=had ...

  8. Dagoin之modelform组件

      ModelForm a. class Meta: model, # 对应Model的 fields=None, # 字段 exclude=None, # 排除字段 labels=None, # 提 ...

  9. windows服务管理操作

    服务程序是windows上重要的一类程序,它们虽然不与用户进行界面交互,但是它们对于系统有着重要的意义.windows上为了管理服务程序提供了一个特别的程序:服务控制管理程序,系统上关于服务控制管理的 ...

  10. 2017-07-20聊聊《C#本质论》

    第一次接触<C#本质论>是在这个链接.那时候刚学写C#,而且它的语言风格深深吸引了我,噢对了还有它强大的IDE--VS.这个链接里的书确实不错.文中提到: 虽然这三本书都是外国原著的,但是 ...