Как проверить радио при загрузке страницы

Question

У меня есть страница для пожертвований с использованием Liquid Shopify. Я НЕ МОГУ изменить name="donation[amount_option]" (у меня нет доступа к этому файлу), поэтому мне нужен код, который позволяет этому оставаться.

Я хочу, чтобы $ 250 автоматически проверялся при загрузке

Мой код

document.querySelector('input[name="donation[amount_option]"][value=250]').checked = true;

<div class="radio-inline donation-v2-amounts padbottommore">
  <span>
    <input id="donation_amount_25" type="radio" name="donation[amount_option]" class="donation_amount_option" value="25">
    <label for="donation_amount_25" class="radio">$25</label>
  </span>
  
  <span>
    <input id="donation_amount_250" type="radio" name="donation[amount_option]" class="donation_amount_option" value="250">
    <label for="donation_amount_250" class="radio">$250</label>
  </span>
  
  <span>
    <input id="donation_amount_1000" type="radio" name="donation[amount_option]" class="donation_amount_option" value="1000">
    <label for="donation_amount_1000" class="radio">$1,000</label>
  </span>
</div>

Answer 1

$(document).ready(function(){
    $('#donation_amount_250').prop('checked',true);
});

Answer 2

Если вам нужна чистая альтернатива js (в дополнение к ответу выше). Вы можете выбрать по значению:

document.querySelector('input[value="250"]').checked = true;

EDIT:

В случае, если неясно, вы можете использовать любой допустимый селектор, такой как идентификатор, то есть ::10000

document.querySelector('#donation_amount_25').checked = true;.

Answer 3

Просто добавьте ключевое слово «checked» в конец ввода.

<input id="donation_amount_250" type="radio" name="donation[amount_option]" class="donation_amount_option" value="250" checked>