html 获取当前radio的选中值,并动态获取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 元素的值,并输出它。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

zzoood

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值