在JavaScript中动态创建一个适用于所有浏览器的单选按钮的方法是通过使用HTML5的input type="radio"元素来实现的。以下是一个示例代码,演示如何在不同的浏览器中创建单选按钮:
// 首先创建input元素
var radios = document.querySelectorAll('input[type="radio"]');
// 然后遍历所有radio元素,创建一个自定义的选择器,用于选中当前元素
for (var i = 0; i< radios.length; i++) {
radios[i].setAttribute('name', 'gender'); // 设定全局name
radios[i].addEventListener('click', handleRadioClick); // 添加事件监听器
}
function handleRadioClick() {
// 获取当前选中的radio元素
var checked = document.querySelector('input[type="radio"]:checked');
// 获取全局name下的其他radio元素
var otherRadios = document.querySelectorAll('input[type="radio"][name="' + checked.getAttribute('name') + '"]');
// 更新其他radio元素的checked属性
for (var j = 0; j< otherRadios.length; j++) {
otherRadios[j].checked = true;
}
}
将以上代码插入到你的HTML文件中,即可在所有浏览器中创建一个动态的单选按钮。
领取专属 10元无门槛券
手把手带您无忧上云