Question

我有一个包含几个字段的表格。当用户选中该复选框时，我希望将3个字段中的数据设置为空白。

当前，它没有按照我希望的方式工作。我正在使用DOM开发来实现这一目标。

(function(){
  getProperties();
})();

function getProperties(){
    axios.get("https://my-json-server.typicode.com/isogunro/jsondb/UserProfile").then(function(response) {
         console.log(response)
      //If user checks the box
      if(document.querySelector('input[title="anonymous"]').checked==true){
          document.querySelector('input[title="fname"]').value = " "
          document.querySelector('input[title="lname"]').value = " "
          document.querySelector('input[title="email"]').value = " "
         }else{
          document.querySelector('input[title="fname"]').value = response.data[0].FirstName
          document.querySelector('input[title="lname"]').value = response.data[0].LastName
          document.querySelector('input[title="email"]').value = response.data[0].email
         } 
      
          document.querySelector('input[title="country"]').value = response.data[0].country
          document.querySelector('input[title="office"]').value = response.data[0].Office    
        
      })
      .catch(function (error) {
        console.log(error);
      });
}

关于我在做什么错的任何想法吗？

以下是更清晰的代码笔：https://codepen.io/isogunro/pen/XWXpoMy

Answer 1

什么都不会触发您的函数...您已经定义了getProperties可以自我调用...但是只能发生一次...请考虑使用onclick属性来触发getProperties函数。

<input type="checkbox" title="anonymous" onclick="getProperties()"></div>

Answer 2

我假设您想在单击复选框时更新输入。在这种情况下，您需要添加事件监听器。

document.querySelector('input[title="anonymous"]').addEventListener('input',getProperties);

Answer 3

您需要在复选框中添加eventListener，以便在DOM中进行更新。由于您是在开始时调用getProperties()方法的，并且此时没有选中checbox，因此on-load不会发生任何变化。

但是，如果您打算基于复选框的点击来切换输入框中的值，我建议将功能从clear the values移到单独的功能中。

您可以参考更新后的代码笔：https://codepen.io/idhruvs/pen/vYLdqRo

Answer 4

您需要将复选框绑定到事件。

$("input[title='anonymous']").change(function() {
    getProperties();
});

为什么javascript无法识别我的复选框动作

4 个答案: