使用jQuery获取和设置input的radio值

在前端开发中，经常需要操作表单元素，其中radio按钮是常用的一种表单元素。通过jQuery可以方便地获取和设置radio按钮的值，从而实现交互和逻辑控制。本文将介绍如何使用jQuery来获取和设置input类型为radio的值。

获取radio按钮的值

要获取radio按钮的值，首先需要选择对应的radio按钮元素，然后使用jQuery的val()方法获取其值。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Get Radio Value</title>
  <script src="
</head>
<body>
  <input type="radio" name="gender" value="male" id="male"> Male
  <input type="radio" name="gender" value="female" id="female"> Female
  <button id="getBtn">Get Value</button>
  <p id="result"></p>

  <script>
    $(document).ready(function() {
      $('#getBtn').click(function() {
        var value = $('input[name="gender"]:checked').val();
        $('#result').text('Selected value: ' + value);
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们定义了两个radio按钮，分别表示性别为男性和女性。当用户选中其中一个按钮并点击按钮时，就会通过jQuery获取选中按钮的值，并在页面上显示出来。

设置radio按钮的值

要设置radio按钮的值，可以通过设置其checked属性来实现。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>Set Radio Value</title>
  <script src="
</head>
<body>
  <input type="radio" name="color" value="red" id="red"> Red
  <input type="radio" name="color" value="blue" id="blue"> Blue
  <button id="setBtn">Set Value</button>

  <script>
    $(document).ready(function() {
      $('#setBtn').click(function() {
        $('#blue').prop('checked', true);
      });
    });
  </script>
</body>
</html>

在上面的示例中，我们定义了两个radio按钮，分别表示颜色为红色和蓝色。当用户点击按钮时，通过jQuery设置蓝色按钮的checked属性为true，即选中蓝色按钮。

类图

下面是一个简单的类图，展示了通过jQuery实现获取和设置radio按钮值的过程：

classDiagram
    class Radio {
        + getRadioValue()
        + setRadioValue()
    }

    class jQuery {
        + val()
        + prop()
    }

    Radio --> jQuery

以上就是使用jQuery获取和设置input类型为radio的值的方法。通过这些方法，我们可以方便地处理radio按钮的交互和逻辑控制。希望本文对你有所帮助！