Force require on display:None

Question

I have the following html:

<ul class="payment-methods">
  <li class="payment-method paypal">
    <input name="payment_methods" type="radio" id="paypal">
    <label for="paypal"></label>
  </li>
  <li class="payment-method pagseguro">
    <input name="payment_methods" type="radio" id="pagseguro">
    <label for="pagseguro"></label>
  </li>
  <li class="payment-method boleto">
    <input name="payment_methods" type="radio" id="boleto">
    <label for="boleto"></label>
  </li>
</ul>

That shows payment methods.

In it, the radio buttons are with display:none so that the labels are shown in their place.

There is a way for me to force at least 1 button, to be marked even if they are with display:none?

The result is this:

CSS

@charset "utf-8";
/* CSS Document */

.divCheckList .valorBool,
.divCheckList .divCheckBox {
    height: 34px;
    display: inline-block;
    border: rgb(222,222,222) 1px solid;
    vertical-align: middle;
}
.divCheckList .valorBool {
    line-height: 34px;
}
.divCheckList .labelCheckBox {
    position: relative;
    display: block;
    width: 60px;
    height: 34px;
    background-color: rgb(222,222,222);
    border: none;
    border-radius: 34px;
    -webkit-transition: .4s;
    transition: .4s;
    cursor: pointer;
}
.divCheckList .labelCheckBox:before {
    position: absolute;
    display: block;
    width: 26px;
    height: 26px;
    background-color: #FFF;
    border-radius: 50%;
    content: "";
    margin: 4px;
    -webkit-transition: .4s;
    transition: .4s;
}
.divCheckList .divCheckBox .checkBox:checked + .labelCheckBox {
    background-color: blue;
}
.divCheckList .divCheckBox .checkBox:checked + .labelCheckBox:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

Answer 1

I believe the goal is to interact radio along with the image that is displayed, making the image have the behavior of radio. If it is, you can, instead of defining display: none, removing the DOM element, use visibility: hidden, that only the hidden.

What is the difference between display:None and visibility:Hidden?

The point is that the space occupied on the screen by input is not compensated by hiding it and therefore it is also necessary to define its position as absolute; in this way, you will remove the element from the flow natural rendering and your screen space will be compensated.

Take an example:

label {
  cursor: pointer;
}

label > input {
  visibility: hidden;
  position: absolute;
}

label > input:checked + img {
  border: solid 1px red;
}

<label>
  <input type="radio" name="avatar" value="1" checked>
  <img src="http://via.placeholder.com/100x100" alt="">
</label>
<label>
  <input type="radio" name="avatar" value="2">
  <img src="http://via.placeholder.com/100x100" alt="">
</label>
<label>
  <input type="radio" name="avatar" value="3">
  <img src="http://via.placeholder.com/100x100" alt="">
</label>

Answer 2

Set width and height to "0", so it won’t be "display:None" and won’t appear the same way.

  width:0;
  height:0;