Bootstrap 单选按钮通过 jQuery 取消选中

2个回答

dindin_peng

2025-09-17 19:48

取消选中 Bootstrap 单选按钮的方法

在使用 Bootstrap 进行开发时，我们经常会使用单选按钮来实现用户在一组选项中进行选择的功能。然而，有时候我们需要通过代码来取消选中某个单选按钮，以实现一些特定的需求。本文将介绍如何使用 jQuery 来取消选中 Bootstrap 单选按钮，并提供相应的案例代码。

取消选中单选按钮的需求场景

在一些特定的场景中，我们可能需要通过代码来取消选中某个已选中的单选按钮。例如，在一个表单中，当用户选择了某个选项后，又想取消选择时，我们就需要通过代码来实现这个功能。

使用 jQuery 取消选中单选按钮的方法

要使用 jQuery 来取消选中 Bootstrap 单选按钮，我们需要首先找到相应的单选按钮元素，然后移除其选中状态即可。在 Bootstrap 中，单选按钮的选中状态是通过添加 "active" 类来实现的。因此，取消选中的方法就是移除该类。

下面是一个简单的示例代码，演示了如何使用 jQuery 取消选中 Bootstrap 单选按钮：

html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/CSS/bootstrap.min.CSS">
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="radio1" autocomplete="off" checked>
        <label class="btn btn-outline-primary" for="radio1">Option 1</label>
        <input type="radio" class="btn-check" name="btnradio" id="radio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="radio2">Option 2</label>
        <input type="radio" class="btn-check" name="btnradio" id="radio3" autocomplete="off">
        <label class="btn btn-outline-primary" for="radio3">Option 3</label>
    </div>
    <button id="cancelButton">取消选择</button>
    <script>
        $(document).ready(function() {
            $("#cancelButton").click(function() {
                $(".btn-check").removeClass("active");
            });
        });
    </script>
</body>
</html>

在上面的代码中，我们创建了一个包含三个单选按钮的按钮组，每个按钮都有一个对应的元素作为其显示内容。然后我们添加了一个按钮，用于触发取消选择的操作。

通过使用 jQuery，我们在按钮的点击事件中使用 removeClass() 方法来移除所有具有 "btn-check" 类的元素的 "active" 类，从而取消选中所有单选按钮。

通过使用 jQuery，我们可以方便地取消选中 Bootstrap 单选按钮。通过在点击事件中使用 removeClass() 方法，我们可以移除单选按钮的选中状态，从而实现取消选择的功能。这对于一些特定的需求场景来说非常有用。

示例代码：

html
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://cdn.JSdelivr.net/npm/bootstrap@5.3.0/dist/CSS/bootstrap.min.CSS">
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
        <input type="radio" class="btn-check" name="btnradio" id="radio1" autocomplete="off" checked>
        <label class="btn btn-outline-primary" for="radio1">Option 1</label>
        <input type="radio" class="btn-check" name="btnradio" id="radio2" autocomplete="off">
        <label class="btn btn-outline-primary" for="radio2">Option 2</label>
        <input type="radio" class="btn-check" name="btnradio" id="radio3" autocomplete="off">
        <label class="btn btn-outline-primary" for="radio3">Option 3</label>
    </div>
    <button id="cancelButton">取消选择</button>
    <script>
        $(document).ready(function() {
            $("#cancelButton").click(function() {
                $(".btn-check").removeClass("active");
            });
        });
    </script>
</body>
</html>

：

举报有用（4）分享收藏

13100502534

2025-09-20 20:02

+ 关注

要通过 jQuery 取消 Bootstrap 单选按钮的选中状态，可以使用以下代码： $(document).ready(function() $('#yourRadioButtonId').prop('checked', false); }); 这里的 #yourRadioButtonId 应该替换为你的单选按钮的实际ID。这样就可以取消选中状态了。

举报有用（4）分享收藏

Bootstrap 单选按钮通过 jQuery 取消选中

2个回答

dindin_peng

13100502534

热门话题

相关问题