jQuery操作input中radio的技巧

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

1、获取选中的 radio 按钮

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

男
女

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

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

2、设置选中的 radio 按钮

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

男
女

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

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

3、禁用或启用 radio 按钮

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

男
女

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

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

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

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

男
女
提交

我们可以使用以下 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？如果不支持，是否可以回退到其他解决方案？

网页名称：jQuery操作input中radio的技巧
标题来源：http://www.shufengxianlan.com/qtweb/news16/340766.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联