如何用纯 Javascript 替换 jQuery change 和 val 方法

Question

购物车包含用于附加事件处理程序并在外部小部件中设置值的 jQuery 代码：

$(function () { 
  $("#smartpost_select0" ).change(function() {
    var valik = $('#smartpost_select0').val();
    $('.js-transportselect-radio').prop("checked", false);
    if (valik==='-') {
      $('#Field1').val('');
      } else {
      $('#Field1').val('SMARTPOST'+valik);
      $('#Field2').val('SMARTPOST');

   };
    
  });

  });

smartpost_select0 由外部小部件通过外部 Javascript 文件创建。 Field1 和 Field2 是输入类型=应用程序创建的文本字段。 .js-transportselect-radio 类和字段由应用程序创建。

如何更改此代码以删除 jQuery 依赖项？是否有本地方法来附加更改处理程序和切换选中的属性？

Answer 1

addEventListener() 是 on() 的原生等价物。 checked 和 value 是 Element 对象的属性，所以不需要像 jQuery 的 attr() 或 prop() 这样的方法。同样，querySelector() 和 querySelectorAll() 允许您使用 CSS 样式的选择器检索 DOM 元素。

document.addEventListener('DOMContentLoaded', () => {
  let field1 = document.querySelector('#Field1');
  let field2 = document.querySelector('#Field2');

  document.querySelector('#smartpost_select0').addEventListener('change', e => {
    document.querySelectorAll('.js-transportselect-radio').forEach(el => el.checked = false);
    
    let valik = e.target.value;
    if (valik === '-') {
      field1.value = '';
    } else {
      field1.value = 'SMARTPOST' + valik;
      field2.value = 'SMARTPOST';
    }
  });
}); 

为了将来参考，网站http://youmightnotneedjquery.com 提供了一个有用的参考，用于将 jQuery 方法转换为原生 JS。