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

  这是之前写的一个模态框 要求单选 但是 要求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. python导入不同目录下模块的方法

    下面将具体介绍几种常用情况:(1)主程序与模块程序在同一目录下:如下面程序结构:`-- src    |-- mod1.py    `-- test1.py    若在程序test1.py中导入模块m ...

  2. TurnipBit—MicroPython开发板:妥妥拽拽零基础也能玩编程

    可视化编程网站入口:www.turnipbit.com 说到编程.谈到硬件,你也许会想到屌丝逆袭女神的"传奇"故事,也许会浮现出带着眼镜.头发稀少.无精打采的程序猿形象." ...

  3. IDEA第七章----插件

    idea的另一个可爱之处,就是它的强大的插件,下面我以CodeGlance插件为例,这个可以快速定位代码 第一节:安装插件 ● All plugins 显示所有插件. ● Enabled 显示当前所有 ...

  4. #多个关联的python程序在linux后台运行

    由于在shell脚本中直接使用&符号和python程序有冲突,不能正常的进入后台执行python(多番尝试python xxx.py &,后面的&总是不能正常识别.系统cent ...

  5. mycat安装与配置

    1.安装jdk 测试jdk是否已经安装 [root@node002 ~]# java -version-bash: java: command not found 创建解压目录 [root@node0 ...

  6. 使用GitHub+hexo搭建个人独立博客

    前言 使用github pages服务搭建博客的好处有: 全是静态文件,访问速度快: 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 可以随意绑定自己的域名,不仔细看的话 ...

  7. 简单的vuex 的使用

    1. npm install vuex 2. 在src 下 新建文件夹 store (为什么是这个单词,vuex 是用来状态管理的,用储存一些组件的状态,取存贮之意),store 文件下 新建文件 i ...

  8. Spring Boot快速入门(三):依赖注入

    原文地址:https://lierabbit.cn/articles/6 spring boot使用依赖注入的方式很简单,只需要给添加相应的注解即可 @Service用于标注业务层组件 @Contro ...

  9. Lottie的使用

    一.简介 Lottie是Airbnb开源的一个面向IOS.Android.React Native的动画库,能分析Adobe After Effects导出的动画,并且能让原生App像使用静态素材一样 ...

  10. C#学习笔记-备忘录模式

    什么是备忘录模式? 备忘录模式(Memento):在不破坏封装的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态. 这样以后就可将该对象恢复到原先保存的状态. 备忘录模式的组成   Orig ...