Мои переключатели не изменяются на Проверено при нажатии. Я пытаюсь использовать это, чтобы изменить отображаемый контент

Question

Я делаю очень простое приложение погоды с помощью API. В моем коде есть часть, в которой я хочу, чтобы пользователь щелкнул радио-кнопку того места, для которого я буду отображать текущую погоду. Затем у меня есть функция в JavaScript, которая проверяет, установлен ли переключатель. Если это так, он будет отображать погоду для этого места. Проблема, с которой я столкнулся, заключается в том, что это не работает, когда пользователь нажимает кнопку, и работает, только если я вручную изменяю HTML на «checked =" true "".

Есть идеи, как заставить html измениться на 'checked = "true", когда пользователь нажимает кнопку?

function success(pos) {
  if (manchester.checked) {
    var lat = 53.48;
    var long = -2.24;
    weather(lat, long);
  } else if (leeds.checked) {
    var lat = 53.80;
    var long = -1.5491;
    weather(lat, long);
  } else if (london.checked) {
    var lat = 51.5074;
    var long = -0.12;
    weather(lat, long);
  }
}

<form action="">
  <label for="manchester">
      <input type="radio" value="manchester" id="manchester" name="location" checked>Manchester</input>
     </label>
  <label for="leeds">
      <input type="radio" value="leeds" id="leeds" name="location">Leeds</input>
     </label>
  <label for="london">
      <input type="radio" value="london" id="london" name="location">London</input>
     </label>
</form>

Следующая функция работает, если я вручную изменяю каждую метку радиосвязи на «флажок =« истина »», однако я хочу, чтобы это произошло, когда пользователь нажимает радиокнопку.

Answer 1

Надеюсь, это поможет:

const manchester = document.querySelector('#manchester')
const leeds = document.querySelector('#leeds')
const london = document.querySelector('#london')
const radios = document.querySelectorAll('input[type=radio]')
for (let i = radios.length; i--;) {
  radios[i].onclick = success;
}

function success(pos) {
  if (manchester.checked) {
    var lat = 53.48;
    var long = -2.24;
    console.log(lat, long);
  } else if (leeds.checked) {
    var lat = 53.80;
    var long = -1.5491;
    console.log(lat, long);
  } else if (london.checked) {
    var lat = 51.5074;
    var long = -0.12;
    console.log(lat, long);
  }
}

<form action="">
  <label for="manchester">
      <input type="radio" value="manchester" id="manchester" name="location" checked>Manchester</input>
     </label>
  <label for="leeds">
      <input type="radio" value="leeds" id="leeds" name="location">Leeds</input>
     </label>
  <label for="london">
      <input type="radio" value="london" id="london" name="location">London</input>
     </label>
</form>

Если что-то неясно - я объясню.