使用 jQuery 实现 radio 的选中与反选

我们知道在 Html 中当我们选中一个radio后，再次点击该 radio，那么该 radio 依然是一个选中的状态，但是有时我们需要实现这样的逻辑：一个选中的 radio，再次点击该 radio 时，会取消它的选中状态 。

演示效果

实现逻辑

  • 取消 click 事件的默认动作
  • 使用 mouseup 控制 radio 的选中与反选
<!DOCTYPE HTML>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

        <script type="text/javascript">

            $(function(){

                $(":radio[name='sex']").click(function(event){

                    // 禁用事件的默认动作

                    event.preventDefault();

                })

                // 绑定一个鼠标单击事件

                .mouseup(function(){

                    $(this).prop("checked",!$(this).is(":checked"));

                });

            })

        </script>

  </head>

  <body>

    男：<input type="radio" name="sex" value="1"> 女：<input type="radio" name="sex" value="0">

 </body>

</html>

此文参考至：https://www.cnblogs.com/zz-930474270/p/7091147.html

使用 jQuery 实现 radio 的选中与反选的更多相关文章

  1. JQuery判断radio是否选中，获取选中值

    本文摘自:http://www.cnblogs.com/xcj1989/archive/2011/06/29/JQUERY_RADIO.html   /*----------------------- ...

  2. JQuery判断radio是否选中并获取选中值的示例代码

    这篇文章主要介绍了JQuery判断radio是否选中并获取选中值的方法,代码很简单,但很实用,需要的朋友可以参考下 其他对radio操作功能,以后在添加.直接上代码,别忘记引用JQuery包 ? 1 ...

  3. jquery checkbox radio 标签 选中的3种方法

    张映 发表于 2013-07-16 分类目录: js/jquery 标签:checkbox, jquery, radio, 选中 jquery 很灵活,checkbox radio标签选中的方法有很多 ...

  4. Jquery 获取 radio/select选中值

    Radio <input type="radio" name="rd" id="rd1" checked="checked& ...

  5. springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

    一.复选框选中.反选.全选.全不选 html代码: <input type='checkbox' name='menuCheckBox' value='10' >苹果 <input ...

  6. JQuery - 判断radio是否选中，获取选中值

    代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  7. jquery 获取radio被选中的值

    <html> <head> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"& ...

  8. jquery中checkbox的选中，反选，全不选 注意1.6版本以上将attr改成prop

    <script type="text/javascript"> $(function () { // 全选 $("#btnCheckAll").bi ...

  9. jquery判断radio是否选中

    微交易-实体系统 微交易-虚拟系统   <div class="system"> <div class="systemt"> <l ...

随机推荐

  1. jsp（java server page）

    jsp的组成元素; 1, 指令 page指令 <%@ page ..........%> language---当前页面使用的语言:java import---当前页面引入的类库, 默认是 ...

  2. vue 数组中嵌套的对象添加新属性--页面更新

    vue 数组中嵌套的对象添加新属性--页面更新:https://www.jianshu.com/p/8f0e5bb13735

  3. 使用requests_html抓取数据

    from requests_html import HTMLSession import json class YejiCollege: def __init__(self, url): self.u ...

  4. Java实现ArrayList

    说明都在注释: package adt.array; import java.util.Iterator; import java.util.NoSuchElementException; /** * ...

  5. cgi+lighttpd上传大文件失败解决办法

    问题: - 前端页面点击上传按钮,不超过30M的小文件顺利上传到板子指定位置,上传60Md的更新包,出错,http状态码413——请求实体过大 环境: - web服务器——lighttpd1.4.30 ...

  6. MySQL--16 MHA修复

    目录 一.恢复MHA 二.MHA切换 三.配置VIP漂移 一.恢复MHA #1.修复旧主库 [root@db01 ~]# /etc/init.d/mysqld start #2.在mha日志中找到ch ...

  7. Java疯狂讲义笔记——Lambda表达式

    Java8新增的Lambda表达式 [特性]支持将代码块作为方法参数,Lambda表达式允许使用更简洁的代码来创建只有一个抽象方法的接口(这种接口被称为函数式接口)的实例. [组成部分]1,形参列表 ...

  8. Vue路由监听

    一.问题描述 描述:页面1showowner.vue跳转到页面2showuser.vue 需求:页面1的多个结点对应于一个页面2文件[页面2未展示] 问题:并不是页面一的一个结点对应一个页面二文件 处 ...

  9. 动态规划之数字三角形(POJ1163)

    在下面的数字三角形中寻找一条从顶部到底边的路径,使得路径上所经过的数字之和最大.路径上的每一步都只能往左下或 右下走.只需要求出这个最大和即可,不必给出具体路径. 既然求目标问题是根据查表得来的,自然 ...

  10. Python 把字符串变成浮点数

    from functools import reducedi = {}di.update(zip('1234567890.', [1,2,3,4,5,6,7,8,9,0,'.'])) def str2 ...