jquery-tmpl 设置单选
时间: 2023-07-07 16:08:52 浏览: 55
首先,你需要在 HTML 中定义单选框的模板。例如:
```html
<script id="radioTemplate" type="text/x-jquery-tmpl">
<label>
<input type="radio" name="myRadio" value="${value}" {{if checked}}checked{{/if}}>
${text}
</label>
</script>
```
在模板中,我们使用 `${value}` 和 `${text}` 分别表示单选框的值和显示的文本。另外,我们使用 `{{if checked}}` 和 `{{/if}}` 来判断是否应该选中该单选框。
然后,在 JavaScript 中,你可以使用 `$.tmpl` 函数来渲染模板,并将结果添加到 DOM 中。例如:
```javascript
// 定义数据
var data = [
{ value: 'apple', text: '苹果', checked: true },
{ value: 'banana', text: '香蕉', checked: false },
{ value: 'orange', text: '橙子', checked: false }
];
// 渲染模板
var html = $('#radioTemplate').tmpl(data);
// 将结果添加到 DOM 中
$('#myRadioList').append(html);
```
在上面的代码中,我们首先定义了数据,然后使用 `$.tmpl` 函数渲染模板。最后,我们将渲染结果添加到 `#myRadioList` 元素中。
注意,在上面的模板中,我们使用了 `name="myRadio"` 来将多个单选框归为一组。这样,只有其中一个单选框可以被选中。