首页原生JavaScript单选框联动

原生JavaScript单选框联动

时间: 2023-09-28 19:13:55 浏览: 99

原生JS实现自定义下拉单选选择框功能

浏览器自带的原生下拉框不太美观，而且各个浏览器表现也不一致，UI一般给的下拉框也是和原生的下拉框差别比较大的，这就需要自己写一个基本功能的下拉菜单/下拉选择框了。最近，把项目中用到的下拉框组件重新封装了一下，以构造函数的方式进行封装，主要方法和事件定义在原型上，下面是主要的实现代码并添加了比较详细的注释，分享出来供大家参考。代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,或者直接bable转下。先放个预览图吧，后面有最终的动态效果图：（样式和交互参考了阿里和Iview UI库）下面是主要的HTML代码(包含部分js调用代码)： <!DOCTYPE html> <h

当一个单选框选中时，我们可以使用JavaScript来实现与其他单选框的联动效果。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <title>单选框联动示例</title> </head> <body> <h3>请选择：</h3> <input type="radio" name="fruit" value="apple" onchange="handleFruitChange(event)">苹果 <input type="radio" name="fruit" value="orange" onchange="handleFruitChange(event)">橙子 <input type="radio" name="fruit" value="banana" onchange="handleFruitChange(event)">香蕉 <h3>你选择的是：</h3> <p id="selectedFruit"></p> <script> function handleFruitChange(event) { var selectedFruit = event.target.value; document.getElementById("selectedFruit").textContent = selectedFruit; } </script> </body> </html> ``` 在上面的代码中，我们创建了三个单选框，它们的name属性都设置为"fruit"，value属性分别设置为"apple"、"orange"和"banana"。每个单选框都有一个onchange事件，在选中状态改变时会触发该事件。在JavaScript中，我们定义了一个handleFruitChange函数，它接收一个event参数。当单选框的选中状态改变时，该函数会被调用。我们通过event.target.value来获取当前选中的值，并将其显示在id为"selectedFruit"的段落元素中。这样，当你选择一个单选框时，选中的值就会在页面上显示出来，实现了单选框的联动效果。

阅读全文