如何在页面加载时检查收音机

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"></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">0</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">,000</label>
  </span>
</div>

Answer 1

只需在输入的末尾添加"checked"关键字即可。

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

Answer 2

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

Answer 3

如果您需要一个纯粹的 js 替代方案（除了上面的答案）。您可以 select 按值：

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

编辑：

如果不清楚，您可以使用任何有效的select或例如id，即：

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

如何在页面加载时检查收音机

How to have a radio checked on page load

javascript

jquery

radio-button

liquid

shopify