使用 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. 5G网络的深度强化学习：联合波束成形，功率控制和干扰协调

    摘要:第五代无线通信(5G)支持大幅增加流量和数据速率,并提高语音呼叫的可靠性.在5G无线网络中共同优化波束成形,功率控制和干扰协调以增强最终用户的通信性能是一项重大挑战.在本文中,我们制定波束形成, ...

  2. Spring cloud学习--Zuul01

    Zuul解决的问题 作为系统的统一入口,屏蔽了系统内部各个微服务的细节 可以与微服务治理框架结合,实现自动化的服务实例维护以及负载均衡的路由转发 实现接口权限校验与微服务业务逻辑的解耦 搭建Zuul服 ...

  3. CodeChef Sereja and LCM(矩阵快速幂)

    Sereja and LCM   Problem code: SEALCM   Submit All Submissions   All submissions for this problem ar ...

  4. php cookie session 深究一下

    当一个用户用浏览器访问web(www.96net.com.cn)时候,若服务器开启session_start() 服务器tmp临时目录 自动生成session_id 并放回给创建一个cookie 保存 ...

  5. 关联查询总结，left join 和 inner join 区别和优化

    left join 是做左外关联,主表内容都会显示:符合关联条件的附表内容才会显示出来. inner join 是内关联,没有主表附表的概念:两个表中,同时符合关联条件的数据才会显示出来. left ...

  6. 使用定时器实现在console中打印内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. node-sass 安装失败解决方法

    使用淘宝镜像源 npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ npm install node-s ...

  8. vue-cli3脚手架的安装

    如果之前有安装过其他的版本的话,要先卸载 卸载:npm uninstall vue-cli-g  或  yarn global remove vue-cli 安装:npm i @vue/cli -g ...

  9. 【记录】logstash 的filter 使用

    概述 logstash 之所以强大和流行,与其丰富的过滤器插件是分不开的 过滤器提供的并不单单是过滤的功能,还可以对进入过滤器的原始数据进行复杂的逻辑处理,甚至添加独特的新事件到后续流程中 强大的文本 ...

  10. 2019-6-23-WPF-托盘显示

    title author date CreateTime categories WPF 托盘显示 lindexi 2019-06-23 11:52:36 +0800 2018-11-21 11:19: ...