jQuery 操作input中radio的技巧

本文介绍了使用jQuery操作input中radio的技巧，包括获取选中值、设置选中状态等。

jQuery 是一个快速、简洁的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互等操作，在网页开发中，我们经常需要使用 jQuery 来操作 input 中的 radio 按钮，本文将介绍如何使用 jQuery 操作 input 中的 radio 按钮的技巧。

1、获取选中的 radio 按钮

要获取选中的 radio 按钮，我们可以使用 :checked 选择器，假设我们有以下 HTML 代码：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

我们可以使用以下 jQuery 代码获取选中的 radio 按钮：

var selectedGender = $("input[name='gender']:checked").val();
console.log(selectedGender); // 输出 "male" 或 "female"

2、设置选中的 radio 按钮

要设置选中的 radio 按钮，我们可以使用 prop() 方法，假设我们有以下 HTML 代码：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女

我们可以使用以下 jQuery 代码设置选中的 radio 按钮：

$("input[name='gender'][value='male']").prop("checked", true);

3、禁用或启用 radio 按钮

要禁用或启用 radio 按钮，我们可以使用 prop() 方法，假设我们有以下 HTML 代码：

<input type="radio" name="gender" value="male" disabled>男
<input type="radio" name="gender" value="female">女

我们可以使用以下 jQuery 代码禁用或启用 radio 按钮：

// 禁用选中的 radio 按钮
$("input[name='gender']:checked").prop("disabled", true);
// 启用选中的 radio 按钮
$("input[name='gender']:checked").prop("disabled", false);

4、为 radio 按钮添加事件处理程序

要为 radio 按钮添加事件处理程序，我们可以使用 change() 方法，假设我们有以下 HTML 代码：

<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<button id="submit">提交</button>

我们可以使用以下 jQuery 代码为 radio 按钮添加事件处理程序：

$("submit").click(function() {
  var selectedGender = $("input[name='gender']:checked").val();
  console.log(selectedGender); // 输出 "male" 或 "female"
});

以上就是使用 jQuery 操作 input 中的 radio 按钮的技巧，接下来，我们将回答一些与本文相关的问题。

问题1：如何在点击其他 radio 按钮时取消选中当前选中的 radio 按钮？

答：可以使用 change() 方法为所有 radio 按钮添加事件处理程序，当点击其他 radio 按钮时，取消选中当前选中的 radio 按钮，示例代码如下：

$("input[name='gender']").change(function() {
  $("input[name='gender']").not(this).prop("checked", false);
});

问题2：如何判断一个 radio 按钮是否被禁用？

答：可以使用 prop() 方法获取 radio 按钮的 disabled 属性，如果返回 true，则表示该 radio 按钮被禁用；如果返回 false，则表示该 radio 按钮未被禁用，示例代码如下：

var isDisabled = $("input[name='gender']").prop("disabled");
console.log(isDisabled); // 如果被禁用，输出 "true"；否则，输出 "false"

问题3：如何在页面加载完成后执行某些操作？

答：可以使用 $(document).ready() 方法在页面加载完成后执行某些操作，示例代码如下：

$(document).ready(function() {
  // 在这里编写需要在页面加载完成后执行的操作
});

问题4：如何在浏览器支持的情况下使用原生 JavaScript？如果不支持，是否可以回退到其他解决方案？