自定义图像复选框

Question

我正在努力使CSS与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>