jquery获取radio选中的复选框

原创

mob64ca12e08acf 2023-10-10 08:41:45 ©著作权

文章标签 jQuery 复选框代码示例 文章分类 jQuery 前端开发

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

jQuery获取radio选中的复选框

引言

在前端开发中，经常会使用到表单元素，其中包括复选框（checkbox）和单选按钮（radio button）。当用户选择其中一个选项时，我们常常需要获取到用户的选择，并进行相应的操作。本文将介绍如何使用jQuery来获取radio选中的复选框，并提供相应的代码示例。

了解radio按钮

在开始之前，我们需要先了解radio按钮的基本知识。radio按钮是一种单选按钮，表示用户只能从一组选项中选择一个选项。每个radio按钮都有一个value属性，用于标识它的值。当用户选择其中一个radio按钮时，其他的radio按钮会自动取消选择。

HTML代码示例

下面是一个简单的HTML代码示例，展示了一组radio按钮的使用：

<form id="myForm">
  <input type="radio" name="color" value="red"> Red
  <input type="radio" name="color" value="green"> Green
  <input type="radio" name="color" value="blue"> Blue
</form>

在这个例子中，我们有三个radio按钮，它们的name属性都被设置为"color"，用来表示它们是同一组的选项。

使用jQuery获取选中的复选框

要获取radio选中的复选框，我们可以使用jQuery的选择器来选择被选中的radio按钮，并获取它的值。下面是使用jQuery来获取radio选中的复选框的代码示例：

$(document).ready(function() {
  $('input[name="color"]').change(function() {
    var selectedColor = $('input[name="color"]:checked').val();
    console.log('Selected color: ' + selectedColor);
  });
});

在这个示例中，我们使用了change事件监听器来监听radio按钮的变化。当用户选择一个新的radio按钮时，change事件会触发，并执行相应的回调函数。在回调函数中，我们通过$('input[name="color"]:checked').val()来获取被选中的radio按钮的值，并将其打印在控制台上。

类图

下面是使用mermaid语法表示的类图，表示了本文中所使用的关键类和它们的关系：

classDiagram
  class jQuery {
    <<Singleton>>
    -dom: Object
    -selector: String
    -selected: Object
    --
    +ready(): void
    +change(): void
  }
  class Document {
    -elements: Array
    --
    +ready(): void
  }
  class InputElement {
    -type: String
    -name: String
    -value: String
    --
    +change(): void
    +val(): String
  }
  jQuery --|> Document
  InputElement --|> Document

在这个类图中，我们使用了三个类：jQuery、Document和InputElement。