jquery - upgrade bootstrap 3 to 4 button toggle to radio buttons - Stack Overflow

admin管理员组

文章数量:1123377

I'm having trouble wrapping my head around upgrading a Bootstrap button group from Bootstrap 3 to Bootstrap 4, where they are supposed to be radio button inputs.

Basically, I just want the buttons to toggle active on and off. I keep going back and forth trying to get the upgrade to work, or just adding javascript myself to make the buttons toggle, but I can't get either to work.

Here is the "working" Bootstrap 3 implementation.

<div class="btn-group" data-toggle="buttons-radio">
    <a href="#grid" data-view="grid" class="btn active">Table</a> 
    <a href="#graph" data-view="graph" class="btn">Graph</a> 
</div>                              

The links above have javascript associated with them, so I'm confused how to add the classes to a radio button and have them continue working.

I tried using the Bootstrap 4 documentation and wrapping the input in the link, but that gives me actual radio buttons that don't show and hide the content like they should in the first link. Now the code looks like:

<div class="btn-group btn-group-toggle" data-toggle="buttons ">
   <a href="#grid " data-view="grid " class=" ">
      <label class="btn btn-secondary ">
      <input type="radio " name="options " id="option1 " autocomplete="off ">Table</label>
   </a>                  
   <a href="#graph " data-view="graph ">
      <label class="btn btn-secondary active ">
      <input type="radio " name="options " id="option1 " autocomplete="off ">Graph</label>
   </a>                  
</div>  

I'm also confused whether I need to link to another js file. I don't see anything in the documentation pointing to a 'buttons plugin' file but it sounds like this isn't included natively. Where do I find that CDN or file to attach? Right now I have bootstrap 4 js and css attached as well as jquery and popper.min.js.

I'm having trouble wrapping my head around upgrading a Bootstrap button group from Bootstrap 3 to Bootstrap 4, where they are supposed to be radio button inputs.

Basically, I just want the buttons to toggle active on and off. I keep going back and forth trying to get the upgrade to work, or just adding javascript myself to make the buttons toggle, but I can't get either to work.

Here is the "working" Bootstrap 3 implementation.

<div class="btn-group" data-toggle="buttons-radio">
    <a href="#grid" data-view="grid" class="btn active">Table</a> 
    <a href="#graph" data-view="graph" class="btn">Graph</a> 
</div>                              

The links above have javascript associated with them, so I'm confused how to add the classes to a radio button and have them continue working.

I tried using the Bootstrap 4 documentation and wrapping the input in the link, but that gives me actual radio buttons that don't show and hide the content like they should in the first link. Now the code looks like:

<div class="btn-group btn-group-toggle" data-toggle="buttons ">
   <a href="#grid " data-view="grid " class=" ">
      <label class="btn btn-secondary ">
      <input type="radio " name="options " id="option1 " autocomplete="off ">Table</label>
   </a>                  
   <a href="#graph " data-view="graph ">
      <label class="btn btn-secondary active ">
      <input type="radio " name="options " id="option1 " autocomplete="off ">Graph</label>
   </a>                  
</div>  

I'm also confused whether I need to link to another js file. I don't see anything in the documentation pointing to a 'buttons plugin' file but it sounds like this isn't included natively. Where do I find that CDN or file to attach? Right now I have bootstrap 4 js and css attached as well as jquery and popper.min.js.

• jquery
• twitter-bootstrap

Share Improve this question Follow edited 12 hours ago isherwood 61k1616 gold badges120120 silver badges168168 bronze badges asked 13 hours ago xanabobanaxanabobana 6733 silver badges1919 bronze badges 4

• Protips: Never dump URLs into a page. You're a front-end developer. Create proper, accessible links. Then, always follow the correct documentation. I seriously doubt you're upgrading from v3 to v4.0.0. The latest stable Bootstrap 4 is 4.6. Follow the docs for that, as they can vary substantially. – isherwood Commented 12 hours ago
• 1 By the way, Bootstrap 4 reached end-of-life two years ago. It's not a worthy upgrade target. For nearly the same effort you could get on a modern platform. – isherwood Commented 12 hours ago
• Your website is loading Bootstrap v2.0 and v.4.1. Loading multiple versions of Bootstrap creates many problems. Since version 3 isn't used on the site, might you be upgrading from 2 to 4? – Yogi Commented 11 hours ago
• Related question: Bootstrap 3 data-toggle buttons-radio "buttons-radio" is only found in Bootstrap v2. – Yogi Commented 7 hours ago

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

Bootstrap 4 doesn’t use buttons-radio anymore.

You still need external jQuery, css but do not need popper for this code (only for tooltips, popovers, or dropdowns.)

Here is a version that toggles the content depending on what is clicked

$(function() {
  $('.btn-group').on('click', 'label', function() {
    const selectedView = $(this).attr('for').replace('btn', '').toLowerCase().trim();
    $('.content-section').each(function() {
      this.hidden = this.id !== selectedView;
    });
  });
});

<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery (required for Bootstrap 4) -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- Bootstrap 4 JS -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="btn-group" role="group" aria-label="View options">
  <!-- Hidden radio inputs -->
  <div style="display: none;">
    <input type="radio" name="viewOptions" id="btnTable" autocomplete="off" checked>
    <input type="radio" name="viewOptions" id="btnGraph" autocomplete="off">
  </div>

  <!-- Visible buttons -->
  <label class="btn btn-primary" for="btnTable">Table</label>
  <label class="btn btn-primary" for="btnGraph">Graph</label>
</div>

<div id="table" class="content-section">Table Content</div>
<div id="graph" class="content-section" hidden>Graph Content</div>

But why not BS5 which does not need JS

<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="btn-group" role="tablist">
  <button class="btn btn-outline-primary active" data-bs-toggle="tab" data-bs-target="#table" type="button" role="tab" aria-controls="table" aria-selected="true">Table</button>
  <button class="btn btn-outline-primary" data-bs-toggle="tab" data-bs-target="#graph" type="button" role="tab" aria-controls="graph" aria-selected="false">Graph</button>
</div>

<div class="tab-content">
  <div id="table" class="tab-pane fade show active" role="tabpanel" aria-labelledby="table-tab">Table Content</div>
  <div id="graph" class="tab-pane fade" role="tabpanel" aria-labelledby="graph-tab">Graph Content</div>
</div>

<!-- Bootstrap 5 JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

本文标签： jqueryupgrade bootstrap 3 to 4 button toggle to radio buttonsStack Overflow