如何在Bootstrap 3中实现toggle switch按钮？我的代码仅显示普通checkbox求助

阿华AIGC实验室

2026-4-27

Fixing Toggle Switch in Bootstrap 3

Hey there! Let's figure out why your toggle switch is just showing up as a plain checkbox.

The Root Cause

The custom-control custom-switch classes you're using are only available in Bootstrap 4 and later—Bootstrap 3 doesn't have a native toggle switch component built in. That's why your code isn't working as expected. Also, your original code didn't include Bootstrap 3's core CSS/JS files, which is essential for any Bootstrap-related functionality to work.

Below are two solid Bootstrap 3-compatible solutions for you:

Solution 1: Use Bootstrap Switch Plugin (Bootstrap 3-Optimized)

Bootstrap Switch is a popular, well-maintained plugin made specifically to add toggle switches to Bootstrap 3 projects. Here's how to implement it:

Full Working Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rating</title>
    <!-- Bootstrap 3 Core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Bootstrap Switch CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/css/bootstrap3/bootstrap-switch.min.css">
    <!-- Your Custom Styles -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form class="container">
        <label class="radio-block">
            <h3>How satisfied are you with our product?</h3>
            <input type="radio" name="optradio" checked> Excellent
            <input type="radio" name="optradio"> Good
            <input type="radio" name="optradio"> Bad
            <input type="radio" name="optradio"> Terrible
        </label>
        <label class="radio-block">
            <h3>Choose one or more options</h3>
            <input type="checkbox" checked> Option 1
            <input type="checkbox"> Option 2
            <input type="checkbox"> Option 3
        </label>
        <!-- Bootstrap Switch Toggle -->
        <div class="form-group">
            <input type="checkbox" name="toggle-switch" id="customSwitches" checked>
            <label for="customSwitches">Toggle this switch element</label>
        </div>
    </form>

    <!-- jQuery (Required for Bootstrap 3) -->
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <!-- Bootstrap 3 Core JS -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- Bootstrap Switch JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.3.4/js/bootstrap-switch.min.js"></script>
    <!-- Initialize the Switch -->
    <script>
        $("[name='toggle-switch']").bootstrapSwitch();
    </script>
</body>
</html>

Quick Tips

Load scripts in this exact order: jQuery → Bootstrap 3 JS → Bootstrap Switch JS—this ensures no dependency conflicts
Customize the switch with data-* attributes, like data-on-color="success" or data-off-color="danger" to match Bootstrap's theme colors

Solution 2: Custom Bootstrap 3-Style Toggle Switch (No Third-Party Plugins)

If you prefer not to add extra plugins, you can build your own toggle switch with CSS that matches Bootstrap 3's default look:

Full Working Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rating</title>
    <!-- Bootstrap 3 Core CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <!-- Custom Toggle Switch Styles -->
    <style>
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
            vertical-align: middle;
            margin-right: 10px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .toggle-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .toggle-slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: #fff;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .toggle-slider {
            background-color: #337ab7; /* Bootstrap 3's primary blue */
        }
        input:focus + .toggle-slider {
            box-shadow: 0 0 1px #337ab7;
        }
        input:checked + .toggle-slider:before {
            transform: translateX(26px);
        }
        .toggle-label {
            vertical-align: middle;
            cursor: pointer;
        }
    </style>
    <!-- Your Custom Styles -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <form class="container">
        <label class="radio-block">
            <h3>How satisfied are you with our product?</h3>
            <input type="radio" name="optradio" checked> Excellent
            <input type="radio" name="optradio"> Good
            <input type="radio" name="optradio"> Bad
            <input type="radio" name="optradio"> Terrible
        </label>
        <label class="radio-block">
            <h3>Choose one or more options</h3>
            <input type="checkbox" checked> Option 1
            <input type="checkbox"> Option 2
            <input type="checkbox"> Option 3
        </label>
        <!-- Custom Bootstrap 3 Toggle Switch -->
        <div class="form-group">
            <label class="toggle-switch">
                <input type="checkbox" id="customSwitches" checked>
                <span class="toggle-slider"></span>
            </label>
            <label class="toggle-label" for="customSwitches">Toggle this switch element</label>
        </div>
    </form>
</body>
</html>

Quick Tips

The switch uses Bootstrap 3's default primary color to blend seamlessly with your existing form
No external dependencies needed—this is a self-contained, lightweight solution

内容的提问来源于stack exchange，提问作者a random noob