自定义复选框bootstrap切换开关与文本

Question

我试图达到如下图像但尚未获得任何结果。我需要一个具有不同文本的开关按钮，例如是/否，自动/自定义，选中/取消选中。我试过但不能和下图相同。

查看演示代码：http://discountwicedeals.com/toggle.html

Answer 1

您可以使用jQuery执行此操作。

可以在这里找到一些很棒的插件（示例和下载）：https://simontabor.com/labs/toggles/。

如果您想搜索其他内容，请在 Google 上搜索“jQuery切换按钮”。我建议使用包含HTML和jQuery代码的来源。否则你需要修改可能的代码。

与我给您的第一个链接相关：https://simontabor.com/labs/toggles/，请参阅此链接：https://www.npmjs.com/package/jquery-toggles。在第3步，您可以自定义切换按钮。

看看这个：

// With options (defaults shown below) 
$('.toggle').toggles({
  drag: true, // allow dragging the toggle between positions 
  click: true, // allow clicking on the toggle 
  text: {
    on: 'ON', // text for the ON position 
    off: 'OFF' // and off 
  },
  on: true, // is the toggle ON on init 
  animate: 250, // animation time (ms) 
  easing: 'swing', // animation transition easing function 
  checkbox: null, // the checkbox to toggle (for use in forms) 
  clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting) 
  width: 50, // width used if not set in css 
  height: 20, // height if not set in css 
  type: 'compact' // if this is set to 'select' then the select style toggle will be used 
});

这段名为text:的代码意味着您可以设置文本以切换ON和OFF。这正是你所需要的。

最后：

如果你真的，真的想拥有与你的链接相同的设计：你可以通过复制脚本获得相同的设计，尝试在你的主目录中创建一个完全不同的页面，并通过按{复制粘贴html和javascript {1}}。你会看到你会得到相同的设计。从那里开始，您可以尝试使用所需的脚本实现设计，以获得相同的设计。