在我的表单中，我检查了输入无线电和图像更改，但我填充输入文本和图像更改回来

in my form I checked input radio and image changes, but I fill input text and the image changes back

本文关键字：图像 输入 填充 文本 回来 我的 无线电 检查 表单      更新时间：2023-09-26

好了，我的大问题来了:

我有这个表单，它有一个提交按钮，只有当您检查并填写了两个输入时才启用(这没有问题)。如果你按照这些步骤去做，你就会意识到我的问题在哪里:

  1. 加载这个jsfiddle https://jsfiddle.net/ozLmdx4o/现在不要太注意代码，只看表单:有一个默认的配置文件图像，一个空的输入文本，一个未选中的输入单选，和一个禁用的提交按钮。
  2. 测试表单:填写输入文本并检查输入单选，观察默认配置文件图像如何更改为另一个图像。选中或取消选中输入无线电，观察图像是如何链接到这个输入的。这是这一切的关键。
  3. 但是，如果你的输入文本填错了怎么办?所以删除你在输入文本中输入的内容，然后重新开始…但是…什么?图像已恢复到默认配置文件图像!即使它连接到输入电台!为什么? ?

为什么会这样?现在你可以检查代码了，因为一定有什么地方我遗漏了。谁能帮我保持图像链接到输入单选按钮?输入单选按钮未选中=默认配置文件图像。输入单选按钮选中=特殊图像。

//INPUT RADIO ON & OFF CODE
var prv1;
var markIt1 = function(e) {
  if (prv1 === this && this.checked) {
    this.checked = false;
    prv1 = null; 
  } else {
    prv1 = this;
  }
  checkIfValid();
  if (!e.target.checked) {
    var img = document.getElementById('theimage');
    img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
  }
};
//TURN ON AND OFF FUNCTIONS
$(function() {
  $('input.whatever_class').on('click', markIt1);
       $('input[type=text]').on('keyup', markIt1);
});
var sbmtBtn = document.getElementById('SubmitButton');
sbmtBtn.disabled = true;
//CHANGE IMAGES 
function changeImage(imgName) {
     image = document.getElementById('theimage');
     image.src = imgName;  
}
function checkIfValid() {
  var current = $('input[type=radio]:checked');
 if ((current.length >= 1) && ($('input[type=text]').val() != "")) {
    sbmtBtn.disabled = false;
  } else {
    sbmtBtn.disabled = true;
  }
};

我希望图像不改变任何时候我修改输入文本。谁能修复我的代码只是必要的解决这个问题?

谢谢!

添加此检查:

if (!e.target.checked && !document.getElementById('whatever_id').checked) {
  var img = document.getElementById('theimage');
  img.src = 'https://s17.postimg.org/7gc66bzu7/user.jpg';
}

它正在对输入文本运行检查功能，但没有被检查，因此出现了问题。希望能有所帮助。

PS:我一直保持e.a rtarget .checked，但如果不需要，那么你可以删除它

使用markIt1()作为文本框和单选按钮的事件处理程序。e.target.checked的值是误导性的，因为e.target可能是文本框或单选按钮。e.target.checked总是为文本框返回false。我会为每个事件使用单独的事件处理程序。

相关文章：