RadioButton在Web表单中的动态内容更新

发布时间：2024-08-19 15:24:22 作者：小樊
来源：亿速云阅读：88

要在Web表单中使用RadioButton实现动态内容更新，您可以使用JavaScript来监听RadioButton的事件并根据选中的值来更新页面内容。

下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic Content Update</title>
</head>
<body>

<form>
    <input type="radio" name="content" value="option1" id="option1" checked> Option 1
    <input type="radio" name="content" value="option2" id="option2"> Option 2
</form>

<div id="content">
    Default content
</div>

<script>
    document.querySelectorAll('input[type=radio]').forEach(input => {
        input.addEventListener('change', () => {
            const selectedValue = document.querySelector('input[type=radio]:checked').value;
            const contentDiv = document.getElementById('content');

            if (selectedValue === 'option1') {
                contentDiv.innerText = 'Content for option 1';
            } else if (selectedValue === 'option2') {
                contentDiv.innerText = 'Content for option 2';
            }
        });
    });
</script>

</body>
</html>

在这个示例中，当用户选择不同的RadioButton时，页面上的内容会根据选中的值动态更新。您可以根据需要修改JavaScript代码来实现您想要的动态内容更新效果。

RadioButton在Web表单中的动态内容更新

相关阅读