自定义图像复选框

Question

我试图用 css 1:1 制作这个盒子，但我的 css 技能太低了。盒子的图片 -> http://prntscr.com/l6kyob（左 - 当复选框被点击时，右 - 当它没有被点击时），现场演示 -> https://victorthemes.com/themes/glazov/gallery/photography-trend/

这就是我目前所做的

jQuery(document).ready(function($){
$(".image-checkbox").each(function () {
  if ($(this).find('input[type="checkbox"]').first().attr("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();
});
});

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

				<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
					<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
					<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />  
  
  <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="usergalleryimages[]" 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="usergalleryimages[]" value="">
      <i class="fa fa-check hidden"></i>
    </label> 
  </div>

请给我一些提示，我该怎么做。

谢谢！！！

Answer 1

<input id='chk0' type='checkbox'><label for="chk0"></label>

对于 CSS，输入/标签对执行以下操作：

标签

• 将复选框放在标签之前
• 在标签之后或标签内放置任何改变“状态”（例如关闭/开启）的内容

属性

• 将#id 分配给复选框和一个由所有复选框共享的.class
• 将for分配给带有复选框#id的值的标签

CSS

• 像这样使用adjacent sibling combinator 和伪类:checked：

  .classOfCheckbox:checked + label .fa-check {
    display: block;
  }
  
  .classOfCheckbox:checked + label .fa-times {
    display: none;
  }
  

---

演示

.nopad {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/*image gallery*/

.image-checkbox {
  cursor: pointer;
  box-sizing: border-box;
  border: 4px solid transparent;
  margin-bottom: 0;
  outline: 0;
}

.chk {
  display: none;
}

.chk:checked+.image-checkbox {
  border-color: #4783B0;
}

.image-checkbox .fas {
  position: absolute;
  color: #4A79A3;
  background-color: #fff;
  padding: 10px;
  top: 0;
  right: 0;
}

.fa-check {
  display: none;
}

.chk:checked+.image-checkbox .fa-check {
  display: block !important;
}

.chk:checked+.image-checkbox .fa-times {
  display: none;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">

<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
  <input id="chk0" class="chk" type="checkbox" name="usergalleryimages[]" value="">
  <label class="image-checkbox" for="chk0">
      <img class="img-responsive" src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/10/Proofing-three.jpg" />
      <i class="fas fa-check"></i>
      <i class="fas fa-times"></i> 
    </label>
</div>

<div class="col-xs-4 col-sm-3 col-md-2 nopad text-center">
  <input id="chk1" class="chk" type="checkbox" name="usergalleryimages[]" value="">
  <label class="image-checkbox" for="chk1">
      <img class="img-responsive" src="https://victorthemes.com/themes/glazov/wp-content/uploads/2017/11/G-Proofing-six.jpg" />
      <i class="fas fa-check"></i>
      <i class="fas fa-times"></i> 
    </label>
</div>