css CSS Custom Checkbox和Radio

Posted 2021-05-13

$(".data-table").on("click", ".custom-checkbox span", function(){
	$(this).closest("tr").toggleClass("selected");
}).on("click", ".check-all-rows span", function(){
	var $checkAll = $(this);
	$checkAll.toggleClass("checked").closest("tr").nextAll("tr").toggleClass("selected").find("input[type='checkbox']").each(function(){
		var 
			$check = $(this),
			$row = $check.closest("tr");

		if($checkAll.hasClass("checked")){
			$check.prop('checked', true);
			$row.addClass("selected");
		} else {
			$check.prop('checked', false);
			$row.removeClass("selected");
		}
		
	});

});

.check-label, .radio-label {
  cursor: pointer;
}

.custom-checkbox input, .custom-radio input {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  }
.custom-checkbox span, .custom-radio span {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  width: 16px;
  height: 16px;
  border: 1px solid #4c85f1;
  background: #fff;
  position: relative;
  top: 1px;
  }

  .custom-radio input[type=radio]:checked + span{background: #959595;border-color: #959595;}
  
  .custom-checkbox span:after, .custom-radio span:after {
    content: '';
    position: absolute;
    background: transparent;
    opacity: 0; }

.custom-checkbox span {
  }
  .custom-checkbox span:after {
    width: 12px;
    height: 7px;
    top: 2px;
    left: 1px;
    border: 3px solid #ffffff;
    border-top: none;
    border-right: none;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    }

 .custom-checkbox input[type=checkbox]:checked + span{background: #4c85f1;border-color: #4c85f1;}
 
.custom-checkbox input[type=checkbox]:checked + span:after {
  opacity: 1; }

.custom-radio span {
  border-radius: 100%; }
  .custom-radio span:after {
    width: 10px;
    height: 10px;
    top: 4px;
    left: 4px;
    background: #023a7f;
    border-radius: 100%;
    }
.custom-radio input[type=radio]:checked + span:after {
  opacity: 1; }


.check-label .custom-checkbox, .radio-label .custom-radio{
	vertical-align:middle;
	display: inline-block;
	margin-right: 3px;
}