正文

如何用jQuery轻松选中并获取表单中radio按钮的值

/0 浏览量
0504

在网页开发中，处理表单数据时，radio按钮是一种常用的控件，用于让用户从一组选项中选择一个。使用jQuery，你可以轻松地选中一个被选中的radio按钮并获取它的值。以下是一个详细的指南，帮助你完成这个任务。

1. 准备工作

首先，确保你的HTML文档中已经包含了jQuery库。你可以通过CDN链接来添加：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 创建HTML表单

接下来，创建一个包含radio按钮的表单。例如：

<form id="myForm">
    <input type="radio" name="option" value="Option1" id="option1">
    <label for="option1">Option 1</label><br>
    <input type="radio" name="option" value="Option2" id="option2">
    <label for="option2">Option 2</label><br>
    <input type="radio" name="option" value="Option3" id="option3">
    <label for="option3">Option 3</label><br>
    <button type="button" id="submitBtn">Submit</button>
</form>
<div id="result"></div>

3. 使用jQuery选中并获取值

现在，让我们用jQuery编写一段代码来选中被选中的radio按钮并获取它的值。

$(document).ready(function() {
    $('#submitBtn').click(function() {
        // 使用 :checked 选择器来获取选中的radio按钮
        var selectedValue = $('input[name="option"]:checked').val();
        
        // 将获取的值显示在页面上
        $('#result').text('Selected option value: ' + selectedValue);
    });
});

解释：

  • $(document).ready(function() {...}): 确保DOM完全加载后再执行函数中的代码。
  • $('#submitBtn').click(function() {...}): 当点击提交按钮时，执行函数中的代码。
  • $('input[name="option"]:checked'): 选择所有被选中的name="option"的radio按钮。
  • .val(): 获取选中radio按钮的值。

4. 测试

将上面的HTML和jQuery代码放入一个HTML文件中，然后在浏览器中打开。选中一个radio按钮，点击提交按钮，你应该能看到一个显示选中值的信息。

通过这种方法，你可以轻松地使用jQuery处理表单中的radio按钮，并获取用户的选择。这对于动态网页开发来说是非常有用的。

-- 展开阅读全文 --