jquery 实现 单选框点击取消
<label for="1" class="z-label">
<input type="radio" class="zui-radiobox" value="" id="1" name="a">
<div class="zui-radiobox-tip"></div>
<span class="zui-radiobox-text">男性</span>
</label>
//radio scss
.z-label {
position: relative;
cursor: pointer;
display:inline-block;
margin-right: 0.30rem;
color: #999999;
font-size:0.30rem;
&:last-child{
margin-right:0;
}
.zui-radiobox {
display: none;
}
.zui-radiobox-tip {
display: inline-block;
width: 20px;
height: 20px;
border: 1px solid #999999;
border-radius: 100%;
position: relative;
background: #fff;
vertical-align: middle;
margin-top: -2px;
margin-bottom: 1px;
box-sizing: border-box;
margin-right:0.15rem;
}
.zui-radiobox:checked+.zui-radiobox-tip {
background: #fff;
border: 1px solid $main-color;
&::after {
content: "\200B";
display: block;
width: 14px;
height: 14px;
background: $main-color;
border-radius: 50%;
margin: auto;
margin-top:2px;
}
}
}
//checkbox
.z-label {
position: relative;
cursor: pointer;
display:inline-block;
margin-right: 0.30rem;
color: #999999;
font-size:0.30rem;
&:last-child{
margin-right:0;
}
.zui-checkbox {
display: none;
}
.zui-checkbox-tip {
display: inline-block;
width: 18px;
height: 18px;
border: 1px solid #999999;
position: relative;
background: #fff;
vertical-align: middle;
margin-top: -2px;
margin-bottom: 1px;
box-sizing: border-box;
margin-right:0.15rem;
}
.zui-checkbox:checked+.zui-checkbox-tip {
background: #fff;
border: 1px solid $main-color;
box-sizing: border-box;
&::after {
content: "\200B";
display: block;
width: 12px;
height: 12px;
background: $main-color;
margin-left: 2px;
margin-top:2px;
}
}
}
//单选按钮再次点击取消选中效果js
$("input[type='radio']").on('click', function() {
if ($(this).data('ischecked') == true) {
$(this).prop('checked', false);
$(this).data('ischecked', false);
} else {
$(this).prop('checked', true);
$(this).data('ischecked', true);
}
$(this).parents('.z-label').siblings('.z-label').find("input[type='radio']").data('ischecked', false);
});
jquery 实现 单选框点击取消的更多相关文章
- Jquery判断单选框是否选中和获取选中的值
第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- jQuery获取单选框(复选框)选中的状态
jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...
- 【前端JS】radio 可单选可点击取消选中
普通情况下 radio 单选框仅仅能实现多选一的效果,可是一旦选择当中一个后,这个单选框就不可点击取消其选中状态了.这样的功能在某些业务环境下并不适用.有时我们既须要单选框的多选一效果.也须要复选框的 ...
- JQuery对单选框,复选框,下拉菜单的操作
JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...
- jQuery重置单选框和input框
取消选中单选框radio,第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的,大家可以看看下面的示例 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQ ...
- JQuery radio单选框应用
转载:JQuery判断radio(单选框)是否选中和获取选中值方法总结 一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 复制代码 代码如下: < !DOCTYPE html P ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- selenium死活定位不到元素以及radio单选框点击不生效
今天操作一个单选框浪费太多时间,现在其实很简单得东西,记录一下: 1,问题一,定位不到 如图,使用selenium IDE和xpath helper都试过,无法成功定位到这个单选框,实际上是因为,这个 ...
- jquery 操作单选框,复选框,下拉列表实现代码
1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type ...
随机推荐
- [Phonegap+Sencha Touch] 移动开发77 Cordova Hot Code Push插件实现自己主动更新App的Web内容
原文地址:http://blog.csdn.net/lovelyelfpop/article/details/50848524 插件地址:https://github.com/nordnet/cord ...
- C++学习之虚函数与纯虚函数
面向对象程序设计(object-oriented programming)的核心思想是数据抽象.继承.动态绑定.通过数据抽象,可以使类的接口与实现分离,使用继承,可以更容易地定义与其他类相似但不完全相 ...
- chrome浏览器调试线上文件映射本地文件
chrome浏览器调试线上文件映射本地文件 通过ReRes让chrome拥有路径映射的autoResponse功能. 前端开发过程中,经常会有需要对远程环境调试的需求.比如,修改线上bug,开发环境不 ...
- java梳理-反射
本文属于面试题梳理系列:问题:java反射类的訪问私有方法与普通方法相比,须要多处理什么? 之前梳理类载入的时候,介绍到初始化的时机之中的一个:用java.lang.reflect包的方法对类进行反 ...
- Android 自己定义圆圈进度并显示百分比例控件(纯代码实现)
首先,感谢公司能给我闲暇的时间,来稳固我的技术,让我不断的去探索研究,在此不胜感激. 先不说实现功能,上图看看效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZ ...
- 用R语言完成的交通可视化报告
http://sztocc.sztb.gov.cn/roadcongmore.aspx最终实现这几个图:1. 实时道路交通可视化2. 实时道路拥堵排名3. 历史路况时间序列图4. 每日每小时道况热力图 ...
- 大神是如何装逼的 之 vim插件使用taglist和nerdtree
本文转载自:http://blog.csdn.net/yaoxingshuai/article/details/51385332 本文主要讲述如何在vim下配置taglist,nerdtree(看代码 ...
- JavaScript Patterns 2.6 switch Pattern
Principle • Aligning each case with switch(an exception to the curly braces indentation rule). • Ind ...
- Hyper-v 3.0 安装centos6.3
Hyper-v 3.0 安装centos6.3 我们说到hyper-v3.0就想到了windows8.windows2012:我们也知道在windows8.windows2012上安装centos系统 ...
- php中strlen,mb_strlen,count之区别
转自 http://www.cnblogs.com/mo-beifeng/archive/2011/08/09/2133039.html 这不是一个固定的数字.本文简要说明一下限制规则. strlen ...