Как сделать так, чтобы мой переключатель уже был отмечен, когда я запускаю страницу или щелкаю в любом месте

Question

Я пытаюсь сделать персонализированный радиовход, и когда я щелкаю в любом месте, кнопка отменяется, как мне выбрать ее независимо от того, где я нажимаю? Другой вопрос, почему опция «мужчина» не отображается уже выбранной, даже если я добавлю опцию отмечен.

мой веб-сайт: https://codepen.io/rodriliva/pen/MWaWrgy

HTML:

<div id="bloco">
      <h1>QUAL É SUA CATEGORIA NO UFC</h1>
      <p id="resultPound">Coloque seu peso e vamos transformar em libras para descobrir em que categoria do UFC você
         lutaria!</p>
      <form> <input type="text" id="fname" name="fname" placeholder="digite seu peso"><br>

      <div class="gender">
         <input type="radio" id="male" value="male" checked>
         <label for="male">Masculino</label>
         <input type="radio" id="female" value="female">
         <label for="female">Feminino</label><br>
      </div>
   </form>
      <button onclick="changeValue()">Confirmar</button>
      <script src="script.js"></script>
   </div>

CSS:

  font-family: lato;
  font-size: 72px;
  color: #FF7979;
  font-weight: heavy;
  margin: 0px 0px 25px 0px;
}

p {
  font-family: lato;
  font-size: 24px;
  color: #000000;
  font-weight: regular;
  margin:0px;
  margin: 0px 0px 30px 0px;
}

button {
  background-color: #FF7979;
  border: none;
  color: white;
  border-radius: 50px;
  width: 281px;
  height: 38px;
  text-align: center;
  display: inline-block;
  font-size: 24px;
  font-family: lato;
  margin: 10px 0px;
}

button:hover {
  outline:0;
  background-color: rgb(235, 119, 119);
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.05), 0 17px 50px 0 rgba(0,0,0,0.05);

}

button:focus {
  outline:0;
}

button:active {
  background-color: rgb(245, 130, 130);
  transform: translateY(4px);
}

input[type=text] {
  width: 281px;
  height: 38px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  border-radius: 50px;
}

input[type=text]:focus {
  border: 3px solid #555;
}

#fname {
  text-align: center;
  font-family: lato;
  font-size: 24px;
  color: #000000;
  font-weight: regular;
  opacity: 40%;
}

#bloco {
text-align: center;
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}

.gender input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.gender {
  color:#EA8079;
  font-size: 24px;
  font-family: lato;
  margin: 20px 0px 25px 0px;
}

.gender label {
    border: 1px solid #EA8079;
    border-radius: 50px;
    padding: 5px 15px;
}

/* .gender input[type="radio"]:checked + label {
  background-color:#bfb;
  border-color: #4c4;
}
 */
.gender input[type="radio"]:focus + label {
  background-color:#FF7979;
  color: white;
  font-weight: bold;
}

.gender label:hover {
  background-color: rgba(255, 0, 0, 0.247);
}

Answer 1

Вы можете добавить атрибут checked ко входу, который вы хотите выбрать автоматически.

<input type="radio" id="male" value="male" checked>

Вы используете псевдоселекторы :focus и :active. Если вы хотите стилизовать проверенное радио, вы должны оформить его как :checked

.gender input[type="radio"]:checked + label {
  background-color:#FF7979;
  color: white;
  font-weight: bold;
}

Но я также заметил, что у ваших входов нет атрибута имени, поэтому они не будут работать исключительно.

      <div class="gender">
         <input type="radio" name="gender" id="male" value="male" checked>
         <label for="male">Masculino</label>
         <input type="radio" name="gender" id="female" value="female">
         <label for="female">Feminino</label><br>
      </div>

Окончательные результаты:

const changeValue = () => {
var teste = document.getElementById("fname").value;  
function kilostoPounds(teste) { return ((teste * 2.2046).toFixed()) }
const finalPound = kilostoPounds(teste);


switch (true) {
    case finalPound == 0:
        document.getElementById("resultPound").innerHTML = `Coloque seu peso e vamos transformar em libras para descobrir em que categoria do UFC você lutaria!`;
        break;
    case finalPound <= 123:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Mosca</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 135:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Galo</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 145:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Pena</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 155:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Leve</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 171:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Meio Medio</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 185:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Medio</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 205:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Meio Pesado</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    case finalPound <= 265:
        document.getElementById("resultPound").innerHTML = `Você seria da categoria <b>Peso Pesado</b>, pois você tem o que equivale a ${finalPound}lb`;
        break;
    default: document.getElementById("resultPound").innerHTML = "Digite um peso correto";
}
}

h1 {
  font-family: lato;
  font-size: 72px;
  color: #FF7979;
  font-weight: heavy;
  margin: 0px 0px 25px 0px;
}

p {
  font-family: lato;
  font-size: 24px;
  color: #000000;
  font-weight: regular;
  margin:0px;
  margin: 0px 0px 30px 0px;
}

button {
  background-color: #FF7979;
  border: none;
  color: white;
  border-radius: 50px;
  width: 281px;
  height: 38px;
  text-align: center;
  display: inline-block;
  font-size: 24px;
  font-family: lato;
  margin: 10px 0px;
}

button:hover {
  outline:0;
  background-color: rgb(235, 119, 119);
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.05), 0 17px 50px 0 rgba(0,0,0,0.05);

}

button:focus {
  outline:0;
}

button:active {
  background-color: rgb(245, 130, 130);
  transform: translateY(4px);
}

input[type=text] {
  width: 281px;
  height: 38px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  border-radius: 50px;
}

input[type=text]:focus {
  border: 3px solid #555;
}

#fname {
  text-align: center;
  font-family: lato;
  font-size: 24px;
  color: #000000;
  font-weight: regular;
  opacity: 40%;
}

#bloco {
text-align: center;
margin: 0;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
white-space: nowrap;
}

.gender input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}

.gender {
  color:#EA8079;
  font-size: 24px;
  font-family: lato;
  margin: 20px 0px 25px 0px;
}

.gender label {
    border: 1px solid #EA8079;
    border-radius: 50px;
    padding: 5px 15px;
}

.gender input[type="radio"]:checked + label {
  background-color:#FF7979;
  color: white;
  font-weight: bold;
}

.gender label:hover {
  background-color: rgba(255, 0, 0, 0.247);
}

.gender label:checked {
  background-color: black;
}

   <div id="bloco">
      <h1>QUAL É SUA CATEGORIA NO UFC</h1>
      <p id="resultPound">Coloque seu peso e vamos transformar em libras para descobrir em que categoria do UFC você
         lutaria!</p>
      <form> <input type="text" id="fname" name="fname" placeholder="digite seu peso"><br>

      <div class="gender">
         <input type="radio" name="gender" id="male" value="male" checked>
         <label for="male">Masculino</label>
         <input type="radio" name="gender" id="female" value="female">
         <label for="female">Feminino</label><br>
      </div>
   </form>
      <button onclick="changeValue()">Confirmar</button>
      <script src="script.js"></script>
   </div>