jquery单选按钮选中

原创

mob64ca12dc54c5 2023-08-23 14:16:46 ©著作权

文章标签 单选按钮 jQuery javascript 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12dc54c5的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 单选按钮选中

在网页开发中，我们经常会遇到需要让用户从多个选项中选择一个的情况。单选按钮是一种常见的选择控件，它允许用户在一个选项列表中选择一个选项。在本文中，我们将学习如何使用 jQuery 来操作和选中单选按钮。

单选按钮基础

在 HTML 中，我们可以使用 <input> 元素和 type="radio" 属性来创建单选按钮。每个单选按钮需要有一个唯一的 id 属性，并且它们的 name 属性必须相同，以便将它们归为一组。

下面是一个简单的示例，其中包含三个单选按钮：

<input type="radio" id="option1" name="options" value="option1">
<label for="option1">Option 1</label>

<input type="radio" id="option2" name="options" value="option2">
<label for="option2">Option 2</label>

<input type="radio" id="option3" name="options" value="option3">
<label for="option3">Option 3</label>

在这个示例中，我们使用了 <label> 元素来提供可点击的标签，这样用户可以点击标签来选择选项。for 属性的值应与相应的单选按钮的 id 值相同，这样点击标签时就会选中相应的单选按钮。

使用 jQuery 选中单选按钮

当我们需要通过 JavaScript 或 jQuery 来选中单选按钮时，可以使用 .prop() 方法来设置 checked 属性值为 true。下面是一个示例，演示了如何使用 jQuery 来选中单选按钮：

$(document).ready(function() {
  // 选中第一个单选按钮
  $('#option1').prop('checked', true);
});

在这个示例中，我们使用了 $(document).ready() 函数来确保在文档加载完毕后执行代码。然后，我们使用 $() 函数来选择具有 id 值为 option1 的元素，并使用 .prop() 方法将其 checked 属性设置为 true。这将导致第一个单选按钮被选中。

如果我们想要取消选中一个已选中的单选按钮，只需将其 checked 属性设置为 false。下面是一个示例：

$(document).ready(function() {
  // 取消选中第一个单选按钮
  $('#option1').prop('checked', false);
});

获取选中的单选按钮

除了设置选中状态，我们还经常需要获取用户选择的单选按钮的值。使用 jQuery，我们可以使用 .val() 方法来获取选中单选按钮的值。下面是一个示例：

$(document).ready(function() {
  // 获取选中的单选按钮的值
  $('#submitBtn').click(function() {
    var selectedValue = $('input[name="options"]:checked').val();
    alert('选中的值是：' + selectedValue);
  });
});

在这个示例中，我们使用 $() 函数来选择具有 name 值为 options 的所有单选按钮，并使用 :checked 选择器来获取选中的按钮。然后，我们使用 .val() 方法来获取选中按钮的值，并在用户点击 #submitBtn 元素时弹出一个对话框显示选中的值。