Javascript 带复选框的引导映像

我有一个小问题，我试图有一个简单的图像，你可以点击，它将被选中或取消选中

我在网上找到了一些引导代码，并在我的项目中进行了尝试。遗憾的是，代码似乎不像在我的本地主机上那样工作

HTML:

JavaScript:

$(".image-checkbox").each(function () {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  }
  else {
    $(this).removeClass('image-checkbox-checked');
  }
});

// sync the state to the input
$(".image-checkbox").on("click", function (e) {
  $(this).toggleClass('image-checkbox-checked');
  var $checkbox = $(this).find('input[type="checkbox"]');
  $checkbox.prop("checked",!$checkbox.prop("checked"))

  e.preventDefault();
});

它的外观：

我的结果：

如您所见，复选框不起作用，位置已关闭

我是一个初学者，我为给你的任何困惑道歉

---

有什么我做错了吗？

请尝试整个示例，从您的示例来看，您似乎没有添加一些必要的css和jquery

诺巴德先生{
左侧填充：0！重要；
右边填充：0！重要；
}
/*图像库*/
.图像复选框{
光标：指针；
框大小：边框框；
-moz框大小：边框框；
-webkit框大小：边框框；
边框：4px实心透明；
页边距底部：0；
大纲：0；
}
.image复选框输入[type=“checkbox”]{
显示：无；
}
.图像复选框已选中{
边框颜色：#4783B0；
}
.image checkbox.fa{
位置：绝对位置；
颜色：#4A79A3；
背景色：#fff；
填充：10px；
排名：0；
右：0；
}
.image复选框已选中。fa{
显示：块！重要；
}
引导映像复选框（多个）
//图像库
//初始化输入的状态
$（“.image复选框”）。每个（函数（）{
if（$（this）.find（'input[type=“checkbox”]'）.first（）.attr（“checked”））{
$（this.addClass（'image-checkbox-checked'）；
}否则{
$（this.removeClass（'image-checkbox-checked'）；
}
});
//将状态同步到输入
$（“.image checkbox”）。在（“单击”上，函数（e）{
$（this.toggleClass（'image-checkbox-checked'）；
var$checkbox=$（this.find（'input[type=“checkbox”]”）；
$checkbox.prop（“选中”），！$checkbox.prop（“选中”））
e、 预防默认值（）；
});
//#sourceURL=pen.js

将其作为外部文件添加到JSFIDLE中，并查看输出。谢谢，这就成功了！

.nopad {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/*image gallery*/
.image-checkbox {
    cursor: pointer;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border: 4px solid transparent;
    margin-bottom: 0;
    outline: 0;
}
.image-checkbox input[type="checkbox"] {
    display: none;
}

.image-checkbox-checked {
    border-color: #4783B0;
}
.image-checkbox .fa {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}
.image-checkbox-checked .fa {
  display: block !important;
}

$(".image-checkbox").each(function () {
  if ($(this).find('input[type="checkbox"]').first().attr("checked")) {
    $(this).addClass('image-checkbox-checked');
  }
  else {
    $(this).removeClass('image-checkbox-checked');
  }
});

// sync the state to the input
$(".image-checkbox").on("click", function (e) {
  $(this).toggleClass('image-checkbox-checked');
  var $checkbox = $(this).find('input[type="checkbox"]');
  $checkbox.prop("checked",!$checkbox.prop("checked"))

  e.preventDefault();
});