jquery radio 设置选中

原创

mob649e815574e6 2023-09-03 05:16:49 ©著作权

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

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

jQuery Radio 设置选中

在前端开发中，我们经常会使用到单选按钮（Radio Button）来让用户在多个选项中选择一个。当我们需要通过代码来设置某个单选按钮被选中时，可以使用 jQuery 来实现。

单选按钮基础知识

单选按钮是一种特殊的 HTML 表单元素，通过它可以让用户在一组选项中选择一个。单选按钮组通常使用相同的 name 属性，这样同一组单选按钮之间就会相互排斥，只能选择其中的一个。

以下是一个简单的单选按钮组的 HTML 代码示例：

<input type="radio" name="fruit" value="apple"> Apple
<input type="radio" name="fruit" value="banana"> Banana
<input type="radio" name="fruit" value="orange"> Orange

上述代码中，每个单选按钮都有相同的 name 属性值 fruit，这样用户只能选择其中的一个。

使用 jQuery 设置单选按钮选中

要使用 jQuery 设置单选按钮选中，我们需要使用 .prop() 方法来修改 checked 属性的值。下面是一个使用 jQuery 设置单选按钮选中的代码示例：

// 设置 name 为 fruit 的单选按钮组中的值为 "banana" 的选项为选中状态
$('input[name="fruit"][value="banana"]').prop('checked', true);

上述代码中，我们使用了选择器 $('input[name="fruit"][value="banana"]') 来选中 name 为 fruit 并且 value 为 banana 的单选按钮，然后使用 .prop('checked', true) 将其设为选中状态。

示例

下面是一个完整的示例，展示了如何使用 jQuery 设置单选按钮选中：

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Radio 设置选中示例</title>
  <script src="
</head>
<body>
  <h2>请选择您喜欢的水果：</h2>
  <input type="radio" name="fruit" value="apple"> Apple
  <input type="radio" name="fruit" value="banana"> Banana
  <input type="radio" name="fruit" value="orange"> Orange

  <button id="selectBanana">选择 Banana</button>

  <script>
    $(document).ready(function() {
      // 点击按钮时，将 Banana 选项设为选中状态
      $('#selectBanana').click(function() {
        $('input[name="fruit"][value="banana"]').prop('checked', true);
      });
    });
  </script>
</body>
</html>

上述代码展示了一个简单的网页，其中有一个单选按钮组用于选择水果，还有一个按钮用于设置选中 Banana 这个选项。当点击按钮时，jQuery 会将 Banana 选项设为选中状态。

类图

下面是一个使用 mermaid 语法标识的类图，表示单选按钮的相关类和属性：

classDiagram
  class RadioButton {
    - name: string
    - value: string
    - checked: boolean
    + getName(): string
    + getValue(): string
    + isChecked(): boolean
    + setName(name: string): void
    + setValue(value: string): void
    + setChecked(checked: boolean): void
  }

上述类图表示了一个 RadioButton 类，它包含了 name、value 和 checked 这三个属性，以及相应的访问方法。