<div class="checkbox-group">
  <input id="checkbox3" type="checkbox" class="jq-checked">
  <label for="checkbox3">
    <span class="icon-checkbox"></span>
    <span>Checked</span>
  </label>
</div>

.checkbox-group {
  // overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  input {
    position: absolute;
    opacity: 0;
    z-index: -1;
    &:hover ~ label,
    &.hover ~ label {
      .icon-checkbox {
        border-color: green;
      }
    }
    &:checked ~ label,
    &.checked ~ label,
    &[checked] ~ label {
      .icon-checkbox {
        border-color: green;
        background-color: green;
        // padding: 4px;
        &::before {
          content: "";
          display: block;
          width: 10px;
          height: 5px;
          border-left: 2px solid #fff;
          border-bottom: 2px solid #fff;
          transform: rotate(-45deg);
          margin-top: 4px;
        }
      }
    }
    &.disable ~ label,
    &[disabled] ~ label {
      cursor: default;
      color: lightgray;
      .icon-checkbox {
        border-color: gray;
      }
    }
  }
  label {
    display: flex;
    align-items: center;
    color: black;
    cursor: pointer;
    .icon-checkbox {
      display: flex;
      width: 20px;
      height: 20px;
      margin-right: 6px;
      justify-content: center;
      align-items: flex-start;
      border: 2px solid #58568a;
      border-radius: 6px;
    }
  }
}

$(".jq-checked").prop("checked", true);