querySelector提示字符串不符合预期模式 如何实现checkbox选中传值到文本框

问题定位 #

• 错误根因：document.querySelector() 仅接收CSS选择器字符串作为入参，你传入回调函数属于参数类型错误，直接触发「The string did not match the expected pattern」报错，此处是混淆了原生JS和jQuery的$(document).ready()写法。
• 其他关联错误：
  1. 原生DOM对象没有.change()事件绑定方法，需调用addEventListener('change', 回调)绑定变更监听
  2. 原生DOM对象没有.val()赋值方法，输入框取值赋值都要操作.value属性
  3. 当checkbox未选中时，document.querySelector("#test:checked")会返回null，直接访问.value会抛出空引用错误，需要先判断节点是否存在再取值

修正后代码 #

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
    setTarget();
    document.querySelector("#test").addEventListener('change', setTarget);
 
    function setTarget() {
        const checkedBox = document.querySelector("#test:checked");
        const tmp = checkedBox ? checkedBox.value : '';
        document.querySelector('#testtarget').value = tmp;
    }
});

HTML代码 #

原HTML代码无逻辑问题，无需调整。

内容的提问来源于stack exchange，提问作者Michael C.