首页 > 其他分享 >jquery获取radio的值

jquery获取radio的值

时间:2023-12-20 16:55:07浏览次数:33  
标签:jquery checked val 获取 fruit radio 按钮 选中

要获取选中的 radio 按钮的值,可以使用 jQuery 中的 :checked 选择器和 val() 方法。

  以下是一个例子:

html

<input type="radio" name="fruit" value="apple" id="appleRadio"> <label for="appleRadio">Apple</label>
<input type="radio" name="fruit" value="banana" id="bananaRadio"> <label for="bananaRadio">Banana</label>
<input type="radio" name="fruit" value="orange" id="orangeRadio"> <label for="orangeRadio">Orange</label>
<button id="submitButton">Submit</button>

js

$(document).ready(function() {
$('#submitButton').click(function() {
const selectedValue = $('input[name="fruit"]:checked').val();
console.log(selectedValue);
});
});

  在上面的例子中,当点击按钮时,会获取选中的 radio 按钮的值,并通过 console.log() 方法输出。$('input[name="fruit"]:checked') 选择器用于选中 name 属性为 "fruit" 且被选中的 radio 按钮。val() 方法用于获取选中的 radio 按钮的值。

  注意:如果没有任何一个 radio 按钮被选中,$('input[name="fruit"]:checked').val() 返回 undefined。因此在使用前需要先进行判断是否有选中的 radio 按钮。

标签:jquery,checked,val,获取,fruit,radio,按钮,选中
From: https://www.cnblogs.com/csjoz/p/17916959.html

相关文章

  • JS获取 URL 链接参数
    方法一源码:functionGetQueryString(name){varreg=newRegExp("(^|&)"+name+"=([^&]*)(&|$)");varr=window.location.search.substr(1).match(reg);if(r!=null)returnunescape(r[2]);returnnull;}使用:consol......
  • Task基础-创建Task,Task传参,获取Task返回值
    Task基础-创建Task,Task传参,获取Task返回值Task基础介绍Task的创建获取Task的执行结果 补充细节1、Task基础介绍Task类是TaskProgrammingLibrary(TPL)中最核心的一个类,下面我将会像大家展示如何使用一些方法来创建不同类型的Task,取消Task,等待Task执行完成,获取Task执行......
  • iTOP-RK3568开发板实时系统编译,Preemption系统/Xenomai系统编译,获取Linux源码包
    1获取Linux源码包编译环境说明:本手册使用的是迅为提供的编译环境ubuntu20.04,在网盘资料“iTOP-3568开发板\03_【iTOP-RK3568开发板】指南教程\05_NPU开发配套资料\03_RKNN_Toolkit2环境搭建\01课程用到的资料\01_初始Ubuntu20虚拟机”路径下。这里的ubuntu20默认开发......
  • jquery介绍
    介绍前端jQuery是一个JavaScript库,用于简化前端开发。它提供了许多常用的功能,可以帮助开发人员更快、更轻松地开发网页。主要用途:DOM操作:jQuery提供了一系列方法来操作DOM元素,例如获取元素、设置元素内容、添加元素等。事件处理:jQuery提供了简洁的语法来处理DOM元......
  • PoshyTip jQuery 文本提示插件的使用
    PoshyTip 是JQuery中一款文本提示插件,在Jsp页面使用相当方便,插件内包含了很多外观样式,可以作为FormTooltips使用。插件包下载地址:http://vadikom.com/files/?file=poshytip/poshytip-1.2.zipPoshyTipDemo地址:http://vadikom.com/demos/poshytip/下载好插件包后,解压可看到目录......
  • Midjourney获取seed值
    一、请求:envelope:curl'https://discord.com/api/v9/channels/1116337317276287057/messages/1124159098066305135/reactions/%E2%9C%89%EF%B8%8F/%40me?location=Message&type=0'\-X'PUT'\-H'authority:discord.com'\-H'......
  • python网站创建012:DOM、BOM、jQuery的使用
    DOM:标签操作模块。这个模块里面的方法专门用来操作HTML的标签的。比如说获取HTML标签的文本、或者给HTML标签加上样式<body><!--1、比如这里定义了一个div,然后你想获取div里面文本,该如何操作--><divid="txt">你好</div><script>//定义一个自执行函......
  • PHP获取访问者ip,判断是否属于数据库中可以访问的ip段
    理解了。下面是一个例子,演示如何使用PHP获取访问者IP,并与数据库中的IP地址段进行比较。在这个例子中,我将使用IP地址和子网掩码的方式存储IP段,同时对比IP地址是否在指定的范围内。数据库表结构:CREATETABLEip_access(idINTAUTO_INCREMENTPRIMARYKEY,netw......
  • mybatis获取insert操作自增主键值
    大家好,我是joker,希望你快乐。在日常使用mybatis时,经常会遇到数据库表的主键是自增id的情况。数据库的表结构又设计成主子表的情况,在插入主表数据后,为了维护主子表关系,通常需要获取插入主表中的自增id。代码示例mapper.xml<insertid="insertCity"parameterType="City"useG......
  • 拼多多ID取商品详情API:电商行业的核心价值与实时数据获取策略
    一、引言在当今的电商行业中,数据是驱动业务决策和优化用户体验的关键因素。拼多多作为中国电商市场的主要参与者,其根据ID取商品详情原数据的API在电商行业中具有显著的重要性。本文将深入探讨这个话题,并介绍如何实现实时数据获取。二、拼多多根据ID取商品详情原数据API的重要性1.提......