Radio 单选框

单选框组件，用于从多个选项中选择一个。

基础用法

简单的单选框。

<div id="demo-radio"></div>

<script>
const radio = new SaRadio('#demo-radio', {
  label: '选项一',
  value: 'option1',
  checked: true,
  onChange: (checked, value) => {
    console.log('选中:', checked, value);
  }
});

SA.init('body');
</script>

加载 SanoUI 组件中...

单选组

多个单选框组成单选组，同一组使用相同的 name 属性。

<div id="demo-radio-group"></div>

<script>
const container = document.getElementById('demo-radio-group');
['选项一', '选项二', '选项三'].forEach((label, index) => {
  const radioEl = document.createElement('div');
  radioEl.style.marginBottom = '12px';
  container.appendChild(radioEl);
  new SaRadio(radioEl, {
    label: label,
    value: `option${index + 1}`,
    name: 'group1', // 同一组使用相同的 name
    checked: index === 0,
    onChange: (checked, value) => {
      if (checked) {
        console.log('选中:', value);
      }
    }
  });
});

SA.init('body');
</script>

加载 SanoUI 组件中...

禁用状态

通过 disabled: true 禁用单选框。

<div id="demo-radio-disabled"></div>

<script>
const radio = new SaRadio('#demo-radio-disabled', {
  label: '禁用选项',
  value: 'disabled',
  disabled: true
});

SA.init('body');
</script>

加载 SanoUI 组件中...

自动初始化

使用 SA.init() 可以自动初始化所有带有 class="sa-radio" 的单选框组件。

<div>
  <label class="sa-radio" data-radio="true" data-label="选项一" data-value="option1" data-name="group1" data-checked="true"></label>
</div>
<div style="margin-top: 12px;">
  <label class="sa-radio" data-radio="true" data-label="选项二" data-value="option2" data-name="group1"></label>
</div>
<div style="margin-top: 12px;">
  <label class="sa-radio" data-radio="true" data-label="选项三" data-value="option3" data-name="group1"></label>
</div>

<script>
// 使用 SA.init() 自动初始化所有组件
const page = SA.init('body');

// 单选框组件已自动初始化，所有带有 class="sa-radio" 的元素都会被处理
// 同一组的单选框使用相同的 name 属性

// 单选框组件通常不需要手动初始化，直接使用 HTML 类名即可
</script>

加载 SanoUI 组件中...

API

构造函数

new SaRadio(container, config)

参数

参数	说明	类型	默认值
container	容器选择器或元素	string | HTMLElement	-
config	配置选项	SaRadioOptions	{}

配置选项

参数	说明	类型	默认值
label	标签文本	string	''
value	选项值	string | number	-
name	单选组名称（同一组的单选框使用相同的 name）	string	-
checked	是否选中	boolean	false
disabled	是否禁用	boolean	false
onChange	状态变化回调	function(checked: boolean, value: any): void	null

Data 属性

属性	说明	类型	默认值
data-radio	启用自动初始化	boolean	-
data-label	标签文本	string	''
data-value	选项值	string	-
data-name	单选组名称	string	-
data-checked	是否选中	boolean	false
data-disabled	是否禁用	boolean	false

方法

方法名	说明	参数	返回值
setChecked(checked)	设置选中状态	checked: boolean	void
getChecked()	获取选中状态	-	boolean
getValue()	获取选项值	-	any
setDisabled(disabled)	设置禁用状态	disabled: boolean	void
destroy()	销毁实例	-	void

实际使用场景

场景 1：表单中的单选

在表单中使用单选框选择性别、支付方式等。

<form class="sa-form" id="radio-form" style="max-width: 500px;" data-label-position="right" data-label-width="100px">
  <div class="sa-form-item">
    <label class="sa-form-item__label">性别</label>
    <div class="sa-form-item__content">
      <div id="gender-radios" style="display: flex; gap: 1rem;"></div>
    </div>
  </div>
  
  <div class="sa-form-item">
    <label class="sa-form-item__label">支付方式</label>
    <div class="sa-form-item__content">
      <div id="payment-radios" style="display: flex; gap: 1rem;"></div>
    </div>
  </div>
  
  <div style="margin-top: 20px;">
    <button type="button" class="sa-button sa-button--primary" onclick="getFormData()">获取选择</button>
  </div>
</form>

<script>
  SA.init('body');
  
  const genderRadios = [];
  ['男', '女'].forEach((label, index) => {
    const container = document.createElement('div');
    document.getElementById('gender-radios').appendChild(container);
    
    const radio = new SaRadio(container, {
      label: label,
      value: index === 0 ? 'male' : 'female',
      name: 'gender',
      checked: index === 0,
      onChange: (checked, value) => {
        if (checked) console.log('选择性别:', value);
      }
    });
    
    genderRadios.push(radio);
  });
  
  const paymentRadios = [];
  ['支付宝', '微信', '银行卡'].forEach((label, index) => {
    const container = document.createElement('div');
    document.getElementById('payment-radios').appendChild(container);
    
    const radio = new SaRadio(container, {
      label: label,
      value: ['alipay', 'wechat', 'bank'][index],
      name: 'payment',
      checked: index === 0,
      onChange: (checked, value) => {
        if (checked) console.log('选择支付方式:', value);
      }
    });
    
    paymentRadios.push(radio);
  });
  
  function getFormData() {
    const gender = genderRadios.find(r => r.getChecked())?.getValue();
    const payment = paymentRadios.find(r => r.getChecked())?.getValue();
    
    alert(`性别: ${gender}\n支付方式: ${payment}`);
  }
</script>

加载 SanoUI 组件中...