<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 实现 单选框点击取消的更多相关文章

  1. Jquery判断单选框是否选中和获取选中的值

    第一种:利用选中值判断选中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...

  2. jQuery获取单选框(复选框)选中的状态

    jQuery 获取单选框(复选框)选中的状态 <input type="checkbox" name="" id="choose"/& ...

  3. 【前端JS】radio 可单选可点击取消选中

    普通情况下 radio 单选框仅仅能实现多选一的效果,可是一旦选择当中一个后,这个单选框就不可点击取消其选中状态了.这样的功能在某些业务环境下并不适用.有时我们既须要单选框的多选一效果.也须要复选框的 ...

  4. JQuery对单选框,复选框,下拉菜单的操作

    JSP <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...

  5. jQuery重置单选框和input框

    取消选中单选框radio,第一种,第二种方式是使用jQuery实现的,第三种方式是基于JS和DOM实现的,大家可以看看下面的示例 本文提供了三种取消选中radio的方式,代码示例如下: 本文依赖于jQ ...

  6. JQuery radio单选框应用

    转载:JQuery判断radio(单选框)是否选中和获取选中值方法总结 一.利用获取选中值判断选中 直接上代码,别忘记引用JQuery包 复制代码 代码如下: < !DOCTYPE html P ...

  7. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  8. selenium死活定位不到元素以及radio单选框点击不生效

    今天操作一个单选框浪费太多时间,现在其实很简单得东西,记录一下: 1,问题一,定位不到 如图,使用selenium IDE和xpath helper都试过,无法成功定位到这个单选框,实际上是因为,这个 ...

  9. jquery 操作单选框,复选框,下拉列表实现代码

    1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type ...

随机推荐

  1. [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component

    Components with slots can expose their data by passing it into the slot and exposing the data using  ...

  2. 【RefactoringCode】The description of the refactoring book

    Last night the book named [Data Structure with Java Hubbed] was closed. When talked about the advant ...

  3. 解析cocos2d-lua项目中的Hello World

    创建完cocos2d-x的lua项目后.打开项目的Resources目录,找到hello.lua.cocos2d-x的lua项目的測试样例主要就是由这个脚本文件运行的. require "A ...

  4. 读写Word的组件DocX介绍与入门

    本文为转载内容: 文章原地址:http://www.cnblogs.com/asxinyu/archive/2013/02/22/2921861.html 开源Word读写组件DocX介绍与入门 阅读 ...

  5. 基于二叉搜索树的符号表和BST排序

    原代码例如以下: #include <stdlib.h> #include <stdio.h> //#define Key int typedef int Key; struc ...

  6. 通常每个套接字地址(协议/网络地址/端口)只允许使用一次。 数据库连接不释放测试 连接池 释放连接 关闭连接 有关 redis-py 连接池会导致服务器产生大量 CLOSE_WAIT 的再讨论以及一个解决方案

    import pymysqlfrom redis import Redisimport time h, pt, u, p, db = '192.168.2.210', 3306, 'root', 'n ...

  7. RatingBar android:isIndicator="true"

    有时候我们用RatingBar只须要显示不让它选择或改变,解决办法是设置属性 android:isIndicator="true" isIndicator的意思是:是否是指示器,如 ...

  8. K8S之利用Label控制Pod位置

    首先介绍下什么是Label? Label是Kubernetes系列中一个核心概念.是一组绑定到K8s资源对象上的key/value对.同一个对象的labels属性的key必须唯一.label可以附加到 ...

  9. 湖南集训day4

    难度:☆☆☆☆☆☆☆ 题解: 有个定理,另sum(x)表示小于等于x的数中与x互质的数的和 sum(x)=φ(x)*x/2    最后可知f(x)=x  (f(1)=2)  当然打表能知道. 然后就转 ...

  10. [Swift通天遁地]三、手势与图表-(10)创建包含圆点、方形、三角形图标的散点图表

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...