使用 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. sessionStorage、localStorage与cookie

    sessionStoage:容量大.安全.临时存储,跨页面 localStorage: 容量大.安全.永久存储.跨页面 应用: <!-- 存储页面 test-local --> <t ...

  2. 20190823 尚硅谷MySQL核心技术

    背景 视频时间:2017.09 MySQL版本:5.5 MySQL基础 命令行启动.停止MySQL: net start MySQL(这里是注册的服务名称) net stop MySQL 命令行连接M ...

  3. tensorflow 之Dataset数据集之批量数据

    ###生成批次数据 import tensorflow as tf '''reapt()生成重复数据集 batch()将数据集按批次组合''' file_name = ['img1','img2',' ...

  4. php和java的优势

    现在市场上的电子商务软件基本上可归结为两大阵营,即PHP阵营和Java阵营.但对接触电子商务不久的用户来说,看到的往往只是它们的表相,只是明显的价格差异,却很难看出它们之间的实际差异.下面我们就为大家 ...

  5. pjhp实现使用redis来存储session数据

    #设置php处理session的方式为redis,并配置redis的访问地址(因为在redis中绑定的访问地址为127.0.0.1,所以就没有设置访问密码,如果需要请自行搜索)#因为不想修改php.i ...

  6. flask项目中使用富文本编辑器

    flask是一个用python编写的轻量级web框架,基于Werkzeug WSGI(WSGI: python的服务器网关接口)工具箱和Jinja2模板,因为它使用简单的核心,用extension增加 ...

  7. JS书目推荐（私教推荐）

    下面几本书是私教推荐的,从入门到提高,从易到难,想找电子版的可以去下面这个网站找找,挺多书籍的 鸠摩搜书https://www.jiumodiary.com/ JavaScript编程精解 (第二版) ...

  8. eclipse 设置注释模板

    window->preference->java->code  styple->code template->Comments Types /** * @author $ ...

  9. SIP UserAgent (B2BUA client)——libosip2 libeXosip2

    1. libosip2 libeXosip2 http://www.antisip.com/download/exosip2/ Features:--------eXosip2 has support ...

  10. 2018-2-13-wpf-绑定-TextLength-

    title author date CreateTime categories wpf 绑定 TextLength lindexi 2018-2-13 17:23:3 +0800 2018-2-13 ...