Javascript 使用复选框更新输入文本字段

我正在学习如何在网页设计中使用JavaScript和HTML做不同的事情，我遇到了一个我无法解决的问题，当我寻找解决方案时，似乎也找不到

我正在制作一个简单的复选框表格，在这里你被问到一个问题，你选择一个答案，然后根据你的答案更新一个答案。用户可以单击框，响应将始终更新。我现在的JS中只有一个函数，因为我试图在编写其他两个函数之前先让它工作。这是我的

功能强度检查框（）{
var strengthCheckYes=document.getElementById（“strengthCheckYes”）；
var strengthCheckNo=document.getElementById（“strengthCheckNo”）；
if（strengthCheckYes===document.getElementById（“strengthCheckYes”）.checked）{
document.getElementById（“checkboxStrengthResponse”）.value=“你在前世与普京搏斗过，是吗？”；
}else if（strengthCheckNo==document.getElementById（“strengthCheckNo”）.checked）{
document.getElementById（“checkboxStrengthResponse”）.value=“这在将来的某个时候可能是个问题”；
}else if（（StrengthCheckies==document.getElementById（“StrengthCheckies”）.checked）和&（StrengthCheck==document.getElementById（“StrengthCheck”）.checked））{
document.getElementById（“checkboxStrengthResponse”）.value=“到底是哪一个？是还是否？别胡闹了！”；
}
};

复选框版本
问题:

答复

我的回答

你能徒手搏斗吗

对
不
你能跑得过一辆会飞的汽车吗

对
不
你能在国际象棋中击败超级人工智能吗

对
不
您的
if
语句有点不正确。您已经有了要查找的元素，无需再次查找

下面是一个固定的示例：


功能强度检查框（）
{
var strengthCheckYes=document.getElementById（“strengthCheckYes”）；
var strengthCheckNo=document.getElementById（“strengthCheckNo”）；
如果（已选中StrengthCheckies&！已选中StrengthCheckKno）
{
document.getElementById（“checkboxStrengthResponse”）.value=“你在前世与普京搏斗过，是吗？”；
}
else if（StrengthCheck.checked&！StrengthCheckies.checked）
{
document.getElementById（“checkboxStrengthResponse”）.value=“这在将来的某个时候可能是个问题”；
}
否则如果（（已检查强度检查）和&（已检查强度检查））
{
document.getElementById（“checkboxStrengthResponse”）.value=“到底是哪一个？是还是否？别胡闹了！”；
}
};

复选框版本
问题:

答复

我的回答

你能徒手搏斗吗

对
不
你能跑得过一辆会飞的汽车吗

对
不
你能在国际象棋中击败超级人工智能吗

对
不
你不需要你的强项检查，也不需要变量。您可以使用以下选项，因为在选择器上使用
。选中的
将返回您要查找的true或flase：

function StrengthCheckbox() {
    document.getElementById("checkboxStrengthResponse").value = '';
    if (document.getElementById("strengthCheckYes").checked) {
        document.getElementById("checkboxStrengthResponse").value = "You wrestled Putin in your past life didn't you?";
    } else if (document.getElementById("strengthCheckNo").checked) {
        document.getElementById("checkboxStrengthResponse").value = "That could be a problem sometime in the future";
    }
    if (document.getElementById("strengthCheckYes").checked && document.getElementById("strengthCheckNo").checked) {
        document.getElementById("checkboxStrengthResponse").value = "So which is it? Yes or No? Stop playing around!";
    }
};


另外，请注意，您需要将最后一个条件与另一个条件分开，因为如果选中这两个复选框，则无法达到该条件。
要更进一步并提供一点清晰性，请查看以下功能：

function StrengthCheckbox() {
  var yes = document.getElementById('strengthCheckYes'),
      no = document.getElementById('strengthCheckNo'),
      response = document.getElementById('checkboxStrengthResponse');

  if (yes.checked) {
    response.value = "You wrestled Putin in your past life didn't you?";
  } else if (no.checked) {
    response.value = "That could be a problem sometime in the future";
  } 

  if (yes.checked && no.checked){
    response.value = "So which is it? Yes or No? Stop playing around!";
  }
};

您可以首先获取元素并将它们存储在变量中。然后，您可以使用input.checked检查它们是否被检查，并做出相应的反应。这还有一个额外的好处，即每次函数运行时只需从DOM中获取元素。
document.getElementById（“StrengthCheckies”）。选中则返回假值的true
因此，使用
if（document.getElementById（“StrengthCheckies”）.checked）
或
if（document.getElementById（“StrengthCheckies”）.checked==true）

因此，代码将是：

    function StrengthCheckbox()
{
var strengthCheckYes=document.getElementById("strengthCheckYes");
var strengthCheckNo=document.getElementById("strengthCheckNo");
if(document.getElementById("strengthCheckYes").checked)
{
document.getElementById("checkboxStrengthResponse").value="You wrestled Putin in your past life didn't you?";
}
else if(!document.getElementById("strengthCheckNo").checked)
{
document.getElementById("checkboxStrengthResponse").value="That could be a problem sometime in the future"; 
}
else if((document.getElementById("strengthCheckYes").checked) && (document.getElementById("strengthCheckNo").checked))
{
document.getElementById("checkboxStrengthResponse").value="So which is it? Yes or No? Stop playing around!";    
}
};

问题是什么？你的方程是什么？如果，我认为它们根本不相等，你必须改变你的左手边。e、 谢谢你的帮助。这也正是我想要的。很高兴能帮上忙。如果答案对你有帮助，请接受。一旦它允许我，我会的。这让我有几分钟的时间才能接受它。这是一个很好的简化版本，我拥有的和上面@dave发布的内容。这也很有用。谢谢你的回复，我很高兴。当像这样使用Javascript时，我喜欢先获取所有需要的元素，然后在函数中应用逻辑。我发现它有助于以后减少复杂性，或者在需要时更容易做出改变。这也是我在我的大学里教C++的方法。将来当我使用JS时，我可能会越来越多地应用它