前端 【HTML】为 radio 元素添加 change 事件监听器

目录

使用原生JavaScript

使用jQuery

在Angular中

在React中

使用原生JavaScript

在Web开发中，为元素添加事件监听器是常见的需求，比如给单选框（radio）元素添加change事件监听器，以便在用户改变选项时执行特定的逻辑。以下是几种常用的方法来实现这一目标： 使用原生JavaScript 你可以使用原生JavaScript的addEventListener方法来给单选框添加change事件监听器。以下是一个简单的示例：

// 方法一：指定的radio

// 假设你的单选框具有一个共同的类名 'radio'

var radios = document.querySelectorAll('.radio');

radios.forEach(function(radio) {

radio.addEventListener('change', function(event) {

// 在这里编写当单选框改变时需要执行的代码

console.log('单选框值变化：', this.value);

});

});

// 方法一：所有 radio 元素

// 获取所有 radio 元素

const radioElements = document.querySelectorAll('input[name="row[status]"]');

// 为每个 radio 元素添加 change 事件监听器

radioElements.forEach(radio => {

radio.addEventListener('change', () => {

// 获取选中的 radio 元素的值

const value = radio.value;

// 在这里编写当单选框改变时需要执行的代码

// 如增加其他input的显示隐藏

showHide(value )

});

});

// 显示与隐藏

function showHide(value){

if(value == 1){

$('#idx').show();

}else{

$('#idx').hide();

}

}

获取当前选中redio的值：

checkedRadio = document.querySelector('input[name="row[status]"]:checked').value;

使用jQuery

 如果你使用jQuery，可以简化事件监听的语法：

// 选择所有的单选框

$('.radio').change(function() {

// 在这里编写当单选框改变时需要执行的代码

console.log('单选框值变化：', this.value);

});

在Angular中

如果你在使用Angular，可以通过在组件的模板中绑定事件来添加监听器：

然后在组件的TypeScript文件中定义myRadioChange方法：

public myRadioChange(event: any) {

// 在这里编写当单选框改变时需要执行的代码

console.log('单选框值变化：', event.target.value);

}

在React中

在React中，你可以使用useEffect来添加事件监听器，并在组件卸载时移除它：

useEffect(() => {

const handleScroll = (event) => {

// 在这里编写当单选框改变时需要执行的代码

console.log('单选框值变化：', event.target.value);

};

const node = window.querySelector('.radio');

node.addEventListener('change', handleScroll);

return () => {

node.removeEventListener('change', handleScroll);

};

}, []);

return (

);

以上就是为单选框元素添加change事件监听器的几种方法。你可以根据项目需求和自己的熟悉程度选择合适的方式。

参考文章