# 自定义主题组件中的单选按钮

**URL:** https://meta.discourse.org/t/radio-buttons-inside-custom-theme-components/269410
**Category:** Development
**Created:** [2023年六月23日 15:13 UTC](https://meta.discourse.org/t/radio-buttons-inside-custom-theme-components/269410 "2023-06-23T15:13:01Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Rohit\_Khatri](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/rohit_khatri/32/312857_2.png) [@Rohit\_Khatri](https://meta.discourse.org/u/Rohit_Khatri)
#### Post date: [2023年六月23日 15:13 UTC](https://meta.discourse.org/t/radio-buttons-inside-custom-theme-components/269410/1 "2023-06-23T15:13:01Z")

</div>

您好，  
我在本地安装了 discourse，现在正在尝试使用 emberjs 创建一个自定义主题组件。在我的 hbs 文件中，有单选按钮。有人能告诉我如何添加带有默认选中值的 RadioButtons 吗？我在这上面花了几天时间，现在卡在了 RadioButtons 上。任何帮助都将不胜感激。

查看 discourse 源代码后，我做了类似这样的事情

```hbs
<span class="yes">
    <RadioButton
      @class="radio"
      @name="product_news"
      @value="true"
      @id="product_news_t"
      @checked={{this.user_preferences.spiceworks_newsletter}}
    />
    <label for="product_news_t">Yes</label>
</span>
<span class="no">
    <RadioButton
      @class="radio"
      @name="product_news"
      @value="false"
      @id="product_news_f"
      @checked={{this.user_preferences.spiceworks_newsletter}}
    />
  <label for="product_news_t">No</label>
</span>

```

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [2023年七月3日 14:11 UTC](https://meta.discourse.org/t/radio-buttons-inside-custom-theme-components/269410/2 "2023-07-03T14:11:58Z")

</div>

对于 [`<RadionButton>`](https://github.com/discourse/discourse/blob/5034eda3861675bb3be0c93e96553da87ac420ba/app/assets/javascripts/discourse/app/components/radio-button.js)，您应该使用 `@selection` 参数，它将 [自动](https://github.com/discourse/discourse/blob/5034eda3861675bb3be0c93e96553da87ac420ba/app/assets/javascripts/discourse/app/components/radio-button.js#L28-L31) 设置 `checked` 属性。