时间戳

首页 > 解决方案 > 自定义图像复选框

javascript - 自定义图像复选框

问题描述

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

这就是我到目前为止所做的

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>

请给我一些提示，我该如何做到这一点。

谢谢！！！

标签： javascriptcsscheckboxcustomization

解决方案

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

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

标签

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

属性

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

CSS

  • 像这样使用相邻的兄弟组合器和伪类: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>

推荐阅读