正文

学会用jQuery轻松获取过去选中列表单选列的值

/0 浏览量
0516

在网页开发中，单选列表（radio buttons）是一种常见的用户输入元素，用于在多个选项中选择一个。使用jQuery，你可以轻松地获取用户之前选择的单选按钮的值。以下是一步一步的指南，帮助你掌握这个过程。

基础知识

首先，确保你的页面已经引入了jQuery库。如果你还没有引入，可以通过以下代码在HTML文件的<head>部分引入：

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

HTML结构

在你的HTML中，你应该有一个单选列表。以下是一个简单的例子：

<form>
  <input type="radio" id="option1" name="options" value="Option 1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="options" value="Option 2">
  <label for="option2">Option 2</label><br>
  <input type="radio" id="option3" name="options" value="Option 3">
  <label for="option3">Option 3</label><br>
  <button type="button" id="getSelectedValue">Get Selected Value</button>
</form>
<div id="selectedValue"></div>

获取选中值

为了获取选中单选按钮的值，你可以使用jQuery的选择器和属性选择器。以下是如何实现它的代码：

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

这段代码首先在文档加载完成后绑定一个点击事件到ID为getSelectedValue的按钮上。当按钮被点击时，它会查找所有具有name="options"属性的单选按钮，并通过:checked伪类选择器找到被选中的按钮。然后，使用.val()方法获取选中按钮的值，并将这个值显示在ID为selectedValue的<div>元素中。

解释

  • $('input[name="options"]:checked'): 这是一个jQuery选择器，它查找所有具有name="options"属性的<input>元素，并且这些元素是选中的（即:checked伪类）。
  • .val(): 这是jQuery的方法，用于获取匹配元素的值。

通过上述步骤，你就可以轻松地使用jQuery获取用户之前选中的单选列表的值了。这不仅简化了代码，还提高了网页的用户体验。

-- 展开阅读全文 --