带有标志的bootstrap切换按钮

Question

我需要创建一个带有语言选择器FR / AR标志的bootstrap切换按钮 当我选择FR时，我会得到网址1 当我贵妃AR时，我会得到网址2 像这样的东西：

Answer 1

也许这可能会有所帮助：

<input type="checkbox" data-toggle="toggle" data-on="<div class='onDiv'></div>" data-off="<div class='offDiv'></div>" data-onstyle="default" data-offstyle="default" name="test" checked />

的CSS：

.onDiv{
  background:url('http://www.kiplingsociety.co.uk/pix/unionjack2.jpg');
  background-size:contain;
  background-position: 50% 50%;
  background-repeat:no-repeat;
  height:36px;
  width:72px;
}
.offDiv{
  background:url('http://www.mapsofworld.com/images/world-countries-flags/italy-flag.gif');
  background-size:contain;
  background-position: 50% 50%;
  background-repeat:no-repeat;
  height:36px;
  width:72px;
}

我做的是创建一个自举切换，并为每个状态（开/关）设置一个标志作为背景

在这里摆弄：https://jsfiddle.net/dtvdqjb8/

希望有所帮助