引导者## jQuery 获取单选框选中的值### 简介在网页开发中，单选框 (radio button) 是一种常见的表单元素，用于让用户从多个选项中选择唯一一个选项。 使用 jQuery 可以方便地获取用户选中的单选框的值。### 获取单选框值的方法1.
使用 `:checked` 选择器和 `val()` 方法
这是最常见和推荐的方法，它结合了 jQuery 的选择器和 `val()` 方法:```javascript// 获取 name 属性为 "gender" 的被选中的单选框的值var selectedGender = $('input[name="gender"]:checked').val();// 打印选中的值console.log(selectedGender); ```
`input[name="gender"]`: 选择所有 name 属性为 "gender" 的 input 元素。
`:checked`: 过滤出被选中的单选框。
`val()`: 获取选中单选框的值。2.
使用 `each()` 方法遍历
这种方法需要遍历所有单选框，然后判断是否被选中:```javascriptvar selectedValue; $('input[name="option"]').each(function() {if ($(this).is(':checked')) {selectedValue = $(this).val();// 可以选择在此处 return，避免不必要的循环return false; }});console.log(selectedValue); ```
`each()`: 遍历所有 name 属性为 "option" 的 input 元素.
`is(':checked')`: 判断当前元素是否被选中。
`$(this).val()`: 获取当前元素的值。### 示例假设HTML代码如下:```html
```使用上述两种方法获取选中的值:```javascript // 方法一: :checked 选择器和 val() 方法 var selectedFruit = $('input[name="fruit"]:checked').val(); console.log(selectedFruit); // 输出 "banana"// 方法二: each() 遍历 var selectedFruit2; $('input[name="fruit"]').each(function() {if ($(this).is(':checked')) {selectedFruit2 = $(this).val();return false; // 找到后跳出循环} }); console.log(selectedFruit2); // 输出 "banana" ```### 总结使用 jQuery 获取单选框的值非常简单。 `:checked` 选择器和 `val()` 方法的组合是最简洁高效的方案。jQuery 获取单选框选中的值
简介在网页开发中，单选框 (radio button) 是一种常见的表单元素，用于让用户从多个选项中选择唯一一个选项。 使用 jQuery 可以方便地获取用户选中的单选框的值。
获取单选框值的方法1. **使用 `:checked` 选择器和 `val()` 方法**这是最常见和推荐的方法，它结合了 jQuery 的选择器和 `val()` 方法:```javascript// 获取 name 属性为 "gender" 的被选中的单选框的值var selectedGender = $('input[name="gender"]:checked').val();// 打印选中的值console.log(selectedGender); ```* `input[name="gender"]`: 选择所有 name 属性为 "gender" 的 input 元素。* `:checked`: 过滤出被选中的单选框。* `val()`: 获取选中单选框的值。2. **使用 `each()` 方法遍历**这种方法需要遍历所有单选框，然后判断是否被选中:```javascriptvar selectedValue; $('input[name="option"]').each(function() {if ($(this).is(':checked')) {selectedValue = $(this).val();// 可以选择在此处 return，避免不必要的循环return false; }});console.log(selectedValue); ```* `each()`: 遍历所有 name 属性为 "option" 的 input 元素.* `is(':checked')`: 判断当前元素是否被选中。* `$(this).val()`: 获取当前元素的值。
示例假设HTML代码如下:```html
```使用上述两种方法获取选中的值:```javascript // 方法一: :checked 选择器和 val() 方法 var selectedFruit = $('input[name="fruit"]:checked').val(); console.log(selectedFruit); // 输出 "banana"// 方法二: each() 遍历 var selectedFruit2; $('input[name="fruit"]').each(function() {if ($(this).is(':checked')) {selectedFruit2 = $(this).val();return false; // 找到后跳出循环} }); console.log(selectedFruit2); // 输出 "banana" ```总结使用 jQuery 获取单选框的值非常简单。 `:checked` 选择器和 `val()` 方法的组合是最简洁高效的方案。
