使用 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. Visual Studio中把文件夹导入工程中

    VS用到的功能还是太少,记录备忘. 有的时候需要把其他库的源码导入当前工程直接使用,而这个库是源码形式,又带很多目录的. 之前从没遇到过这种情况,自己的库目录自己新建,添加. 第三方库一般有单独的Pr ...

  2. Robotframework使用DatabaseLibrary连接mysql数据库

    Robotframework使用DatabaseLibrary连接mysql数据库 进行数据库操作,需要安装相应的操作库.DatabaseLibrary是常用的库之一,它能兼容MySQL.Oracle ...

  3. vscode 在ubuntu的terminal中下划线不显示解决方案

    Ctrl+Shift+P,打开搜索,Perferences:Open User Settings 设置Editor:Font Family 为 'Ubuntu Mono', monospace 保存, ...

  4. maven配置本地仓库、maven配置阿里中央仓库、eclipse配置maven

    一.maven配置本地仓库路径 1.打开下载好的maven目录 (若没安装,可以看我写的安装步骤https://www.cnblogs.com/xjd-6/p/11344719.html) 2.进入c ...

  5. redis setNx方法

    Redis有一系列的命令,特点是以NX结尾,NX是Not eXists的缩写,如SETNX命令就应该理解为:SET if Not eXists.这系列的命令非常有用,这里讲使用SETNX来实现分布式锁 ...

  6. spring boot 配置文件优先级

    项目中可能存在多个配置文件,那么优先级定义如下: 1.同一目录,application.properties优先级高于application.yml 2.同一目录,config文件夹下的配置文件高于根 ...

  7. KVC、KVO 理解

    参考经典链接: https://www.jianshu.com/p/f8198ca5e682 https://www.jianshu.com/p/be80318115a7 一. KVC 1.KVC介绍 ...

  8. R语言数据类型与数据结构

    一.数据类型 5种 1.character 字符 2.numeric 数值 3.integer 整数 一般数字的存储会默认为数值类型,如果要强调是整数,需要在变量值后面加上 L. x <- 5L ...

  9. 记一次sql索引颠覆认知

    首先先建立数据库和插入数据 我们要查询的命令如下,前提是以mysql数据库为准 , 结果和我想的不太一样,先准备好环境和所需的数据库和表 准备阶段 CREATE TABLE `test` ( `id` ...

  10. Spring Cloud Contract简介

    转载:https://www.jianshu.com/p/e3277824a10a 和dummy service一样 Spring Cloud Contract是个啥? Spring Cloud Co ...