在表格中使用Bootstrap Button Plugin实现多选项高亮的问题

Hey there! Let's tackle those frustrating highlighting issues you're seeing with your Bootstrap Table and Button Plugin setup. Your hunch is spot-on—this is all about how the Bootstrap Button Plugin groups radio buttons.

The Root Cause #

Bootstrap's Button Plugin treats all radio buttons with the same name attribute as a single "button group." That means only one radio in that group can be active (highlighted) at a time. In your case, it looks like the radio buttons across all your tbody columns are sharing the same name value, so clicking a radio in column 2 cancels the selection in column 1, and vice versa. The same issue explains why only one tbody option stays highlighted in your example—they're all in the same group.

The Fix: Independent Radio Groups per Column #

The solution is simple: give each column's radio buttons a unique name attribute. This tells the plugin to treat each column as its own separate group, so selections in one column won't interfere with another.

Here's how to adjust your table markup:

<thead>
  <tr>
    <th>
      <input type="radio" name="thead-group" class="btn-check" id="opt4" autocomplete="off">
      <label class="btn btn-outline-primary" for="opt4">Option4</label>
    </th>
    <!-- Repeat for other thead cells with the same `thead-group` name if needed -->
  </tr>
</thead>
<tbody>
  <tr>
    <!-- Column 1: Unique name for this column's radios -->
    <td>
      <input type="radio" name="tbody-col1-group" class="btn-check" id="opt3" autocomplete="off">
      <label class="btn btn-outline-primary" for="opt3">Option3</label>
    </td>
    <!-- Column 2: Another unique name -->
    <td>
      <input type="radio" name="tbody-col2-group" class="btn-check" id="opt3-2" autocomplete="off">
      <label class="btn btn-outline-primary" for="opt3-2">Option3-2</label>
    </td>
    <!-- Column 3: Next unique name -->
    <td>
      <input type="radio" name="tbody-col3-group" class="btn-check" id="opt3-3" autocomplete="off">
      <label class="btn btn-outline-primary" for="opt3-3">Option3-3</label>
    </td>
    <!-- Column 4: Final unique name -->
    <td>
      <input type="radio" name="tbody-col4-group" class="btn-check" id="opt3-4" autocomplete="off">
      <label class="btn btn-outline-primary" for="opt3-4">Option3-4</label>
    </td>
  </tr>
</tbody>

What This Does #

• Each column's radio buttons now belong to their own group (thanks to unique name values).
• Clicking a radio in column 4 will only affect other radios in column 4—your column 1 selection will stay highlighted.
• You can now select one option per column, and all active selections will retain their Bootstrap button highlight.

Quick Check #

Make sure you're not using a too-broad initializer for the Button Plugin (like $('.btn').button())—though Bootstrap usually auto-initializes these components, so this shouldn't be an issue if you're including the plugin correctly. The key fix is definitely the unique name attributes per column.

内容的提问来源于stack exchange，提问作者Robert E. McIntosh