《bootstrap单选框;bootstrap table 多选框》

解决方案简述

在Web开发中，Bootstrap提供了便捷的方式来创建单选框和表格中的多选框。对于单选框，通过使用Bootstrap的样式类可以快速构建具有统一外观的单选选项；而针对Bootstrap Table中的多选框，借助其内置的功能与自定义JavaScript代码相结合，能实现灵活的选择操作，如全选、反选等。

一、Bootstrap单选框

1. 基本用法

要创建Bootstrap单选框，只需将<input>元素的type属性设置为radio，并为其添加form-check-input类（如果是Bootstrap 4或5版本）。为了良好的布局效果，一般会搭配form-check类的容器标签。

html</p>

<div class="form-check">
    
    <label class="form-check-label" for="exampleRadios1">
        Default radio
    </label>
</div>

<div class="form-check">
    
    <label class="form-check-label" for="exampleRadios2">
        Second default radio
    </label>
</div>

<p>

2. 自定义样式

如果想要更独特的样式，可以通过覆盖默认样式或者利用Bootstrap提供的自定义控件类。例如，使用custom-control custom-radio类组合（适用于Bootstrap 4）。

html</p>

<div class="custom-control custom-radio">
    
    <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>

<p>

二、Bootstrap Table多选框

1. 使用插件自带功能

当使用Bootstrap Table时，它本身就支持多选框功能。在初始化表格时，设置checkboxHeader : true，就可以在表头显示一个多选框用于全选/取消全选操作，并且每一行也会有一个对应的多选框。

javascript
$('#table').bootstrapTable({
columns: [{
checkbox: true //开启多选框列
}, {
field: 'name',
title: 'Name'
}],
data: [
{name: "Item 1"},
{name: "Item 2"}
],
checkboxHeader: true //开启表头多选框
});


2. 手动实现更多操作

若需要实现更多复杂操作，如获取所有选中的行数据等，可以在页面上绑定事件监听多选框的变化。

javascript
// 获取所有选中的行
function getSelections() {
    return $('#table').bootstrapTable('getSelections');
}</p>

<p>// 绑定多选框变化事件
$('#table').on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
    var selections = getSelections();
    console.log(selections); //这里可以对选中的行进行处理
})

除了上述方法外，还可以根据项目需求，结合其他JavaScript库（如jQuery）来增强多选框的功能，比如实现跨页全选等功能。在使用Bootstrap单选框和Bootstrap Table多选框时，既要充分利用框架提供的功能，也要善于根据实际情况进行定制化开发。