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 ...
随机推荐
- 有用 .htaccess 使用方法大全
这里收集的是各种有用的 .htaccess 代码片段,你能想到的使用方法差点儿全在这里. 免责声明: 尽管将这些代码片段直接复制到你的 .htaccess 文件中,绝大多数情况下都是好用的,但也有极个 ...
- 扩展VirtualBox中的centos硬盘大小
一.克隆文件 我之前安装的时候建的是centos 6.3.可是后来空间不够,没办法,又不想重装centos.由于好多东西要配置,特麻烦,所以先想到了使用resize命令,可是在win8中运行D:\Pr ...
- 【Android】资源系列(一) -- 国际化(多语言)
1.Android 中要实现国际化比較简单. 字符串国际化:仅仅要在 res 目录下新建相应语言的 values 目录就好了. 如.英语环境下的.目录命名为:values-en ...
- 玩转iOS开发 - 视图控制器生命周期
视图控制器生命周期
- LeetCode 290. Word Pattern (词语模式)
Given a pattern and a string str, find if str follows the same pattern. Here follow means a full mat ...
- POJ 3468 A Simple Problem with Integers(线段树区间更新)
题目地址:POJ 3468 打了个篮球回来果然神经有点冲动. . 无脑的狂交了8次WA..竟然是更新的时候把r-l写成了l-r... 这题就是区间更新裸题. 区间更新就是加一个lazy标记,延迟标记, ...
- js 四种调用方式 Method Invocation Pattern
4.3. Invocation Invoking a function suspends the execution of the current function, passing control ...
- java使用poi读取doc和docx文件(maven自动导入依赖包)
java使用poi读取doc和docx文件(maven自动导入依赖包) 于是在网上搜寻了一阵之后才发现原来doc文档和excel一样不能用普通的io流的方法来读取,而是也需要用poi,于是进行了一番尝 ...
- B1090 [SCOI2003]字符串折叠 区间dp
又一道区间dp,和上一篇类似,但是比他简单,这个只有两种转移方法,不是很复杂.直接判断是否为重复的串就行. 题干: Description 折叠的定义如下: . 一个字符串可以看成它自身的折叠.记作S ...
- union 的一个简单例子,搜狗笔试题
union Test{ char a[4]; short b;};Test test;test.a[0]=256;test.a[1]=255;test.a[2]=254;test.a[3]= ...