使用 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. 关于static以及final关键字

    Static关键字: 可以用来修饰类中的属性.类中的方法.以及具体的某一个类. 1.用于修饰属性: 则表示该属性属于整个类,不论有多少个对象实例,所有的实例共同拥有一个static静态的成员变量.该变 ...

  2. Nacos-作为Sring cloud 注册发现

    Nacos:一个更易于构建云原生应用的动态服务发现.配置管理和服务管理平台. https://nacos.io/zh-cn/index.html 功能: 动态服务配置 服务发现和管理 动态DNS服务 ...

  3. MySQL 新建用户和数据库

    MySQL 新建用户和数据库 修改MySql的密码为qwe123 /usr/local/bin/mysqladmin -u root -p password qwe123 mysql设置root远程访 ...

  4. 【JAVA】 04-Java中的多线程

    链接: 笔记目录:毕向东Java基础视频教程-笔记 GitHub库:JavaBXD33 目录: <> <> 内容待整理: 多线程引入 概述 多线程: 进程:正在执行中的程序,其 ...

  5. HTML5中canvas与SVG有什么区别

    SVG SVG 是一种使用 XML 描述 2D 图形的语言,它基于XML也就是我们可以为某个元素附加JavaScript事件处理器,如果SVG 对象的属性发生变化,那么浏览器能够自动重现图形. Can ...

  6. rdev - 查询/设置内核映像文件的根设备，RAM 磁盘大小或视频模式

    总览 SYNOPSIS rdev [ -rvh ] [ -o offset ] [ image [ value [ offset ] ] ] rdev [ -o offset ] [ image [ ...

  7. CentOS7 SSH 密码正确，但仍提示“Permission denied”

    我看其他人解决办法,有的是防火墙端口,有的是sshd_config文件的密码登录,有的ip冲突等等,我都按照那些修改了,但是都不通,最后修改了这个,好用了. 看一下SElinux,敲sestatus, ...

  8. Codeforces Round #394 (Div. 2) - C

    题目链接:http://codeforces.com/contest/761/problem/C 题意:给定n个长度为m的字符串.每个字符串(字符串下标从0到m-1)都有一个指针,初始指针指向第0个位 ...

  9. 设备树中#address-cells和#size-cells作用

    device tree source Example1 / { #address-cells = <0x1>; // 在 root node 下使用 1 個 u32 來代表 address ...

  10. 为什么单个binlog会大于max_binlog_size设置

    查看参数设置mysql> show global variables like '%max_binlog_size%';+-----------------+------------+| Var ...