html 获取当前radio的选中值，并动态获取radio的切换值_html怎么获取radio的值

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 元素的值，并输出它。