首页生成一个自定义的单选框

生成一个自定义的单选框

时间: 2024-09-08 15:02:56 浏览: 33

在JavaScript中，创建一个自定义的单选框（Radio Button）通常使用HTML元素结合JavaScript来实现交互效果。以下是一个简单的示例，展示了如何创建一个带有点击事件监听的单选按钮： ```html <!DOCTYPE html> <html lang="en"> <head> <style> .custom-radio { display: inline-block; position: relative; width: 20px; height: 20px; margin-right: 5px; cursor: pointer; } .custom-radio input[type="radio"] { position: absolute; opacity: 0; z-index: -1; } .custom-radio::before { content: ""; display: inline-block; border: 1px solid #ccc; background-color: #fff; width: 18px; height: 18px; transition: all 0.2s ease; } .custom-radio:checked::before { background-color: blue; } </style> </head> <body> <label class="custom-radio" onclick="toggleOption(this)"> <input type="radio" name="myRadio" id="option1"> <span>Option 1</span> </label> <label class="custom-radio"> <input type="radio" name="myRadio" id="option2"> <span>Option 2</span> </label> <script> function toggleOption(radioButton) { const radios = document.getElementsByName('myRadio'); for (let i = 0; i < radios.length; i++) { if (radios[i] !== radioButton && radios[i].checked) { radios[i].checked = false; radioButton.classList.remove('selected'); } else { radioButton.classList.add('selected'); radioButton.checked = true; break; } } } </script> </body> </html> ``` 这个例子中，我们创建了两个样式化的`<label>`元素，每个标签内部包含一个`<input>`类型的单选按钮和文本描述。当用户点击`<label>`时，`toggleOption`函数会被调用，会检查同名的其他单选按钮是否已经选中，如果选中则取消选中并改变样式，否则只选中当前按钮。