javascript - 带有复选框的 Bootstrap 图像

我有一个小问题，我正在尝试制作一个简单的图像，您可以单击该图像，它会被选中或取消选中。

我在网上找到了一些 Bootstrap 代码并在我的元素中试用了它。遗憾的是，代码在我的本地主机上似乎无法正常工作。

HTML:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
  <h3>Bootstrap image checkbox(multiple)</h3>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>
  <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
    <label class="image-checkbox">
      <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff" />
      <input type="checkbox" name="image[]" value="" />
      <i class="fa fa-check hidden"></i>
    </label>
  </div>

</div>

CSS:

.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;
}

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();
});

它应该是怎样的:codepen

我的结果:results

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

我是初学者，对于任何混淆，我深表歉意。

我做错了什么吗？

最佳答案

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

    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="robots" content="noindex">        
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <link rel="stylesheet prefetch" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
            <style class="cp-pen-styles">.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;
                }</style></head><body>
            <!-- 
            Image Checkbox Bootstrap template for multiple image selection
            https://www.prepbootstrap.com/bootstrap-template/image-checkbox
            -->
            <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
            <div class="container">
                <h3>Bootstrap image checkbox(multiple)</h3>
                <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
                    <label class="image-checkbox">
                        <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
                        <input name="image[]" value="" type="checkbox">
                        <i class="fa fa-check hidden"></i>
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
                    <label class="image-checkbox">
                        <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
                        <input name="image[]" value="" type="checkbox">
                        <i class="fa fa-check hidden"></i>
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
                    <label class="image-checkbox">
                        <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
                        <input name="image[]" value="" type="checkbox">
                        <i class="fa fa-check hidden"></i>
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
                    <label class="image-checkbox">
                        <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
                        <input name="image[]" value="" type="checkbox">
                        <i class="fa fa-check hidden"></i>
                    </label>
                </div>
                <div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
                    <label class="image-checkbox">
                        <img class="img-responsive" src="https://dummyimage.com/600x400/000/fff">
                        <input name="image[]" value="" type="checkbox">
                        <i class="fa fa-check hidden"></i>
                    </label>
                </div>
    
            </div>        
            <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
            <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script>// image gallery
                // init the state from the input
                $(".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();
                });
                //# sourceURL=pen.js
            </script>
        </body>
    </html>

关于javascript - 带有复选框的 Bootstrap 图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48379838/

javascript - 带有复选框的 Bootstrap 图像

上一篇：html - 显示 : flex shows underlined icons

下一篇：javascript - 从 css 类中提取 id 值到 javascript 变量