demo-单选框固定悬浮

最新推荐文章于 2025-04-11 11:54:03 发布

vener__

最新推荐文章于 2025-04-11 11:54:03 发布

阅读量96

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/vener_/article/details/129320829

版权

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <title>Floating Radio Example</title>
    <style>
        .floating-radio {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #fff;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 9999;
        }
        .floating-radio label {
            display: block;
            margin-bottom: 10px;
        }
        .floating-radio input[type="radio"] {
            margin-right: 5px;
        }
    </style>
</head>
<body>
<h1>Floating Radio Example</h1>

<div class="floating-radio">
    <label>
        <input type="radio" name="choice" value="option1"> Option 1
    </label>
    <label>
        <input type="radio" name="choice" value="option2"> Option 2
    </label>
    <label>
        <input type="radio" name="choice" value="option3"> Option 3
    </label>
</div>

<p id="selectedOption"></p>

<script>
    const radioButtons = document.getElementsByName('choice');
    const selectedOption = document.getElementById('selectedOption');

    for (let i = 0; i < radioButtons.length; i++) {
        radioButtons[i].addEventListener('change', () => {
            const selectedValue = document.querySelector('input[name="choice"]:checked').value;
            selectedOption.innerText = `You selected ${selectedValue}`;
        });
    }
</script>
</body>
</html>