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 ...
随机推荐
- 使用openstack的虚拟机模版注意事项
openstack虚拟机模版(flavor)是一个非常奇怪的设计.讲讲我測试时遇到的问题,尽管说在project应用中虚拟机模版在開始时就定制好.后期可能做改动,可是改动时一定要注意,有以下几种情况: ...
- swift 2.0语法 元组
import UIKit /*: 元祖 * 可以将多个值保存在一起 * 格式: (数值1, 数值2, 数值3) * 特点: 元祖可以保存不同数据类型的值 * 用途: 在C/OC中如果一个函数想返回多个 ...
- LeetCode 67. Add Binary (二进制相加)
Given two binary strings, return their sum (also a binary string). For example,a = "11"b = ...
- 2015南阳CCPC L - Huatuo's Medicine 签到
L - Huatuo's Medicine Description Huatuo was a famous doctor. He use identical bottles to carry the ...
- uefi bios安装ubuntu16.04 (win10和ubuntu双系统)
哎呀,没事闲的装双系统,按照晚上的教程装半天也没成功,后来才知道是自己电脑的问题,当然也有那些过时的博客的问题! ultraiso制作ubuntu u盘启动盘 http://www.cr173.co ...
- B1826 [JSOI2010]缓存交换 贪心+离散化+堆
这个题仔细一想可以直接贪心做,因为队列里下一个出现的早的一定最优.正确性显然.然后我只拿了50,我直接模拟另一个队列暴力修改最后一个点的nxt值,自然会T.但是其实不用修改,直接插入就行了前面的不影响 ...
- 苹果树(线段树+Dfs序)
1228 苹果树 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 在卡卡的房子外面,有一棵苹果树.每年的春天,树上总 ...
- cobbler+kickstart安装笔记
cobbler+kickstart安装笔记 本文参考老男孩配置:https://blog.oldboyedu.com/autoinstall-cobbler/ centos7:开机如果不启动网卡,需要 ...
- IMP-00058 ORA-12638:身份证明检索失败
需要将oracle的tns关掉 1.打开 oracle 的Net Manage 地址:开始 -> 程序 -> Oracle -> Configuration and Migratio ...
- UNIX环境高级编程--1
前期准备: 下载apue3源文件(从apuebook.com上),然后编译(make)之后,得到libapue.a动态链接文件(.o 就相当于windows里的obj文件 .a 是好多个.o合在一起, ...