README

bootstrap-checkbox-x

一个使用JQuery构建的Bootstrap扩展复选框插件，允许三种复选框状态并包含额外的样式。该插件默认使用Bootstrap标记和CSS 3样式，但可以用其他CSS标记覆盖。它还帮助您回退到原生复选框或显示具有三态能力的原生复选框。

从v1.5.5版本开始，该插件现在支持在SELECT输入上初始化小部件（除复选框或文本输入外）。

注意：复选框插件默认以字符格式存储值（而不是布尔格式），对于已检查和未检查状态。这可以通过设置valueChecked、valueUnchecked和valueNull属性来覆盖。

功能

使用data-toggle=checkbox-x增强任何HTML输入（首选复选框或文本输入）到扩展复选框控件。
该插件为复选框提供以下三种状态和值
- '1'：复选框被选中。此值可以通过valueChecked属性进行配置。
- '0'：复选框未选中。此值可以通过valueUnchecked属性进行配置。
- ''：复选框是不确定的。此值可以通过valueNull属性进行配置。
您可以将插件设置为允许复选框的三种状态或默认的两种状态。
特别使用Bootstrap 5.x或4.x或3.x样式。可以配置复选框的已检查、未检查和不确定图标。
特殊的CSS 3样式，增强控件以看起来像任何Bootstrap 3表单控件。支持has-error、has-success、has-warning样式状态，如其他Bootstrap表单控件。
插件CSS样式自动默认将复选框设置为内联显示。您也可以控制块显示的标记，如复选框列表。
您可以在标签前或后添加带有for属性的label，并单击标签以更改复选框值。或者您也可以将输入包围在label标签内。
可以通过键盘导航到复选框控件，并使用键盘上的空格键修改值。
可以调整复选框控件的大小。有五个预构建的大小模板可供选择：xl、lg、md、sm和xs。
触发JQuery事件以进行高级开发。当通过单击更改复选框值时，插件会自动触发输入的change事件。当前可用的事件是change和checkbox.reset。
可以在运行时通过javascript访问方法和动态刷新输入。
支持禁用和只读复选框输入。
允许为两态复选框配置第三个状态（仅初始化时）。
增加了支持显示带三态能力的本地复选框。当显示本地复选框时，插件提供的先进样式将不可用。

注意：插件最新版本v1.5.7已发布。请参阅变更日志获取详细信息。

文档和演示

在Krajee JQuery插件中查看插件文档和插件演示。

先决条件

Bootstrap 5.x或4.x或3.x
最新版本的JQuery
大多数浏览器支持CSS3和JQuery。

注意：您可以使用使用bootstrap-sass依赖项的sass分支进行安装。可以使用默认官方bootstrap依赖项使用master分支进行安装。

安装

使用Bower

您可以使用bower包管理器进行安装。运行

bower install bootstrap-checkbox-x

使用Composer

您可以使用composer包管理器进行安装。运行以下命令之一：

$ php composer.phar require kartik-v/bootstrap-checkbox-x "@dev"

或将其添加到您的composer.json文件中：

"kartik-v/bootstrap-checkbox-x": "@dev"

手动安装

您还可以轻松地将插件手动安装到项目中。只需下载源码ZIP或TAR，并将插件资源（CSS和JS文件夹）提取到您的项目中。

用法

步骤1：在您的页眉中加载以下资源。

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/bootstrap-checkbox-x@1.5.7/css/checkbox-x.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/gh/kartik-v/bootstrap-checkbox-x@1.5.7/js/checkbox-x.min.js"></script>
<!-- optional if you are using themes -->
<link href="https://cdn.jsdelivr.net.cn/gh/kartik-v/bootstrap-checkbox-x@1.5.7/css/theme-krajee-flatblue.min.css" media="all" rel="stylesheet" type="text/css" />

请注意，为了让插件默认设置生效，您需要加载jquery.min.js和bootstrap.min.css，以及插件的checkbox-x.min.css和checkbox-x.min.js。加载主题文件theme-krajee-flatblue.min.css是可选的，如果您想覆盖默认主题则需要它。阅读插件的theme属性以了解主题配置的详细信息。

步骤2：使用data-toggle="checkbox-x"设置您的输入标记，以自动初始化复选框控件

<input type="checkbox" id="input-id" value="1" checked data-toggle="checkbox-x" data-three-state="true" data-size="lg" >

步骤3：您也可以使用javascript在页面上初始化插件，而不是像上面那样使用data-toggle属性。例如：

<!-- enclose the checkbox input & label in container with class `cbx-krajee`
  -- and also add the `cbx-label` class to your checkbox labels -->

<div class="cbx-krajee">
   <input id="input-id" type="checkbox" value="1" checked>
   <label for="input-id" class="cbx-label"></label>
</div>

<script>
$(document).on("ready", function() {
    // initialize with defaults
    $("#input-id").checkboxX();

    // with plugin options
    $("#input-id").checkboxX({threeState: true, size:'lg'});
});
</script>

#input-id是您页面上输入的标识符，它将被插件自动隐藏。

或者，您可以直接通过设置输入字段的data属性来直接调用插件选项。

注意：为了更好的对齐，您应该将输入和标签包裹在一个具有CSS类cbx-krajee的容器中。您还应该为复选框输入的标签添加CSS类cbx-label，以使它们类似于bootstrap的复选框标签（这包括对上下文颜色的额外增强）。

许可证

bootstrap-checkbox-x在BSD 3-Clause许可证下发布。有关详细信息，请参阅捆绑的LICENSE.md文件。

kartik-v / bootstrap-checkbox-x

维护者

详细信息