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 ...
随机推荐
- android混合动画实现
在android开发,我们会常常使用到动画,可是简单的一种动画(如旋转.缩放.渐变.位移等)有时候并不能满足我们项目的要求,这时候就须要运用到混合动画.那么在安卓中是怎样实现一个炫酷的混合动画,以下是 ...
- JQuery之操作array
1:split 函数将字符串按某个字符分割,将分割后的结果存入字符串数组中 function SplitUsersInformation(users) { var usersArray = users ...
- LeetCode 970. Powerful Integers (强整数)
题目标签:HashMap 题目让我们找出所有独一的powerful integers 小于bound的情况下. 把 x^i 看作 a:把 y^j 看作b, 代入for loop,把所有的情况都遍历一遍 ...
- Android自定义用户控件简单范例(二)
对于完全由后台定制的控件,并不是很方便其他人的使用,因为我们常常需要看到控件放到xml界面上的效果,并根据效果进行布局的调整,这就需要一个更加标准的控件制作流程: 我们的自定义控件和其他的控件一样,应 ...
- Java中根据字节截取字符串
一.简介 为了统一世界各国的字符集,流行开了Unicode字符集,java也支持Unicode编码,即java中char存的是代码点值,即无论是‘A’还是‘中’都占两个字节. 代码点值:与Unicod ...
- Android 布局属性大全
常用属性汇总: android:hint 设置EditText为空时输入的提示信息 android:gravity 对该view内容的限定:靠上 下 左 右 andro ...
- bzoj1805: [Ioi2007]Sail 船帆
可以发现旗杆的顺序是没有用的,对于每列,它的答案是它的最大值mx*(mx+1)/2 高度由小到大排序旗杆,问题可以转化为在前h行选k个最小的值 考虑激情splay乱搞(我只会splay......) ...
- https://github.com/Boris-Em/BEMCheckBox
https://github.com/Boris-Em/BEMCheckBox BEMCheckBox BEMCheckBox is an open source library making it ...
- C# 数组转换为DataTable 的三个方法
C# 数组转换为DataTable 的三个方法 using System; using System.Data; namespace ArrayToDataTable { class ArrayT ...
- Quartz在.Net网站中的使用方法(附Demo)
现在做一个B/S项目需要用到计划任务,本来想自定写一个的,写了几句,突然想看看网上有没有现成可以用的.结果在苦寻之下找到了Quartz这个组件.看过之后感觉还不错.决定用它实现计划任务了.再找找看有没 ...