使用 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. 【linux】 mail/mutt 发送邮件

    mail: 比较常用,缺点是发送附件要同时安装其他软件: mutt:功能强大,注意发送html需要升级到1.5+版本:   用mail发送邮件: echo "邮件正文" | mai ...

  2. 最长连续公共子序列(LCS)与最长递增公共子序列(LIS)

    最长公共子序列(不连续) 实际问题中也有比较多的应用,比如,论文查重这种,就是很实际的一个使用方面. 这个应该是最常见的一种了,不再赘述,直接按照转移方程来进行: 按最普通的方式就是,直接构造二维矩阵 ...

  3. python math 模块

    数学模块 引入模块:import math 注意: 使用某个模块下的函数,必须先引入这个模块,否则无法正常使用. ceil() 向上取整操作 格式:math.ceil(数值) 返回值:整型 floor ...

  4. 任务调度（02）Spring Schedule

    任务调度(02)Spring Schedule [toc] Spring 3.0 提供两种任务调度方式:一是定时任务调度:二是异步任务调度.这两种任务调度方式都是基于 JUC 实现的,是一种非常轻量级 ...

  5. No-sql之redis常用命令

    转自:http://blog.csdn.net/nicewuranran/article/details/51793760 No-SQL之Redis 介绍 Redis是一种基于内存存储的key-val ...

  6. [Python3] 022 面向对象 第二弹

    目录 6. 面向对象的三大特性 6.1 封装 6.1.1 私有 private 6.1.2 受保护 protected 6.1.3 公开 public 6.2 继承 6.2.1 继承的概念与作用 6. ...

  7. vue-router 路由元信息 终于搞明白了路由元信息是个啥了

    vue-router 路由元信息:https://blog.csdn.net/wenyun_kang/article/details/70987840 终于搞明白了路由元信息是个啥了:https:// ...

  8. redis 持久化 哨兵 主从

    Redis搭建步骤 环境: 三台机器  centos7 关闭防火墙 selinux Redis版本 3.0.5 依赖环境 yum install gcc-c++ ruby rubygems –y 把版 ...

  9. python-MySQL数据库--- 基础篇

    MySQL数据库基础 数据库系统(database system) 1.数据库系统(database system)         数据库系统是计算机系统中一种专门管理数组资源的系统,数据库存储的是 ...

  10. Using text search in Web page with Sikuli

    在網頁中如何使用Sikuli找特定字串呢? 原理: 我們可以使用 組合鍵 ctrl + 來放大網頁的比例,使得sikuli的OCR功能找的更清準 實作: for i in range(4): type ...