Bootstrap图片复选框本地运行异常：点击无响应且布局错位

嘿，作为新手开发者，你的代码其实思路没问题，主要是缺了必要依赖和几个小的CSS/JS执行细节问题，我帮你一步步梳理清楚：

1. 必须补上Bootstrap核心CSS和jQuery依赖 #

你用到了Bootstrap的栅格类（col-xs-4、container），但代码里完全没引入Bootstrap的CSS；同时你的JS用了$（jQuery语法），也没引入jQuery库。这俩是核心基础，缺失直接导致布局错位+JS功能失效。

修正：在HTML头部添加以下代码

<!-- 先引入jQuery，因为Bootstrap JS依赖它 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Bootstrap核心CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">

2. 修复Font Awesome的链接协议问题 #

你的Font Awesome链接用了//协议相对路径，在localhost的http环境下可能被浏览器限制加载（混合内容拦截），改成完整的https链接更稳妥：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

3. 给image-checkbox添加相对定位 #

你的CSS里.fa用了position: absolute，但父元素.image-checkbox没设置position: relative，导致选中图标会跑到页面右上角而不是图片右上角，这也是布局错位的原因之一。

修正CSS：

.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;
  position: relative; /* 新增这一行，让绝对定位的图标相对于图片容器定位 */
}

4. 确保JS在DOM加载完成后执行 #

你的JS代码直接写在全局，可能在DOM还没渲染完就执行了，导致找不到.image-checkbox元素，自然功能失效。需要把代码包裹在$(document).ready()里：

修正JS：

$(document).ready(function() {
  // 初始化已选中的复选框样式
  $(".image-checkbox").each(function () {
    // 这里用prop()判断checked状态比attr()更可靠，因为prop获取的是当前状态，attr是初始属性
    if ($(this).find('input[type="checkbox"]').first().prop("checked")) {
      $(this).addClass('image-checkbox-checked');
    } else {
      $(this).removeClass('image-checkbox-checked');
    }
  });

  // 点击切换选中状态
  $(".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();
  });
});

5. 可选优化：移除冗余的hidden类 #

你的<i class="fa fa-check hidden"></i>里的hidden类是Bootstrap的辅助类，但我们已经通过CSS控制图标显示隐藏了，直接去掉这个类可以避免样式冲突：

<i class="fa fa-check"></i>

把以上几点修改完后，你的图片复选框切换功能应该就能正常工作，布局也会恢复成预期的样子啦~

内容的提问来源于stack exchange，提问作者MrPerry95