【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，可以通过在组件的模板中绑定事件来添加监听器：

<input type="radio" name="myRadio" #myRadio value="1" (change)="myRadioChange($event)">复制

然后在组件的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 (
  <div>
    {/* ...你的单选框元素 ... */}
  </div>
);复制

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