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

2023-12-23 06:24:32

目录

使用原生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事件监听器的几种方法。你可以根据项目需求和自己的熟悉程度选择合适的方式。

文章来源:https://blog.csdn.net/q8688/article/details/135145992
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。