1.先贴一个html代码
<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">{:__('Status')}:</label>
<div class="col-xs-12 col-sm-8">
<div class="radio">
{foreach name="statusList" item="vo"}
<label for="row[status]-{$key}"><input id="row[status]-{$key}" name="row[status]" type="radio" value="{$key}" {in name="key" value="$row.status"}checked{/in} /> {$vo}</label>
{/foreach}
</div>
</div>
</div>
2.获取当前选中的值
要获取这段 HTML 代码中 radio 的值,你可以使用 JavaScript 的 querySelector
方法来选择具有选中状态的 radio 元素,然后获取它的值。以下是一个示例:
// 选择具有选中状态的 radio 元素
const checkedRadio = document.querySelector('input[name="row[status]"]:checked');
// 如果找到了选中的 radio 元素,则获取它的值
if (checkedRadio) {
const value = checkedRadio.value;
console.log(value);
} else {
console.log('未选中任何 radio 元素');
}
在这个示例中,我们使用 querySelector
方法选择具有选中状态的 radio 元素,然后获取它的值。如果找不到选中的 radio 元素,则输出一条消息。
3.切换时动态获取值
要在这段 HTML 代码中动态获取 radio 的值,你可以使用 JavaScript 的 addEventListener
方法来监听 radio 元素的 change
事件。以下是一个示例:
// 获取所有 radio 元素
const radioElements = document.querySelectorAll('input[name="row[status]"]');
// 为每个 radio 元素添加 change 事件监听器
radioElements.forEach(radio => {
radio.addEventListener('change', () => {
// 获取选中的 radio 元素的值
const value = radio.value;
console.log(value);
});
});
在这个示例中,我们使用 querySelectorAll
方法获取所有 radio 元素,然后为每个 radio 元素添加 change
事件监听器。当 radio 元素的值发生变化时,监听器会执行一个函数,该函数获取选中的 radio 元素的值,并输出它。