正文

如何轻松使用jQuery让单选框清空并恢复默认选择？快速上手教程

/0 浏览量
0816

在网页设计中，单选框（radio button）是用户进行单选操作的重要元素。有时候，你可能需要清空单选框的选择，并恢复到默认的选中状态。使用jQuery，这个过程变得非常简单。下面，我将带你一步步完成这个任务。

准备工作

首先，确保你的网页中已经引入了jQuery库。你可以通过CDN链接来引入：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

接下来，假设你有以下HTML结构：

<form>
  <input type="radio" name="option" id="option1" value="1" checked> Option 1<br>
  <input type="radio" name="option" id="option2" value="2"> Option 2<br>
  <input type="radio" name="option" id="option3" value="3"> Option 3<br>
  <button id="resetRadio">Reset Radio Buttons</button>
</form>

在这个例子中，我们有一个单选框组和一个按钮，当点击这个按钮时，我们会清空单选框的选择，并恢复到默认选中状态。

清空单选框并恢复默认选择

  1. 编写jQuery代码：我们需要编写一个函数，当点击按钮时触发这个函数。
$(document).ready(function() {
  $('#resetRadio').click(function() {
    // 清空单选框的选择
    $('input[type="radio"][name="option"]').prop('checked', false);
    
    // 恢复默认选择
    $('#option1').prop('checked', true);
  });
});

  1. 解释代码：

    • $(document).ready(function() {...})：确保DOM完全加载后再执行里面的代码。
    • $('#resetRadio').click(function() {...})：当点击ID为resetRadio的按钮时，执行里面的函数。
    • $('input[type="radio"][name="option"]').prop('checked', false);：找到所有具有name="option"属性的单选框，并将它们的checked属性设置为false，从而清空选择。
    • $('#option1').prop('checked', true);：将ID为option1的单选框的checked属性设置为true，这样它就会恢复为默认选中状态。

测试代码

将上述代码放入你的HTML文件中，并确保jQuery库也被正确引入。然后，点击“Reset Radio Buttons”按钮，你应该能看到所有单选框都被清空，并且“Option 1”被选中。

通过这种方式，你可以轻松地使用jQuery来控制单选框的状态，无论是清空选择还是恢复默认选择。希望这个教程能帮助你快速上手！

-- 展开阅读全文 --