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

Question

我正在学习如何使用JavaScript和HTML来做网页设计的不同工作，遇到一个无法解决的问题，在寻找解决方案时似乎找不到。

我正在制作一个简单的复选框表，向您询问一个问题，选择一个答案，然后根据您的答案更新响应。 用户可以单击这些框，并且响应将始终被更新。 我现在在JS中只有一个函数，因为我试图在编写其他两个函数之前先使其工作。 这就是我所拥有的。

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

 <thead> <th colspan="3">Checkbox Version</th> </thead> <tbody> <tr> <td> <p>Question</p> </td> <td> <p>Answer</p> </td> <td> <p>My Response</p> </td> </tr> <tr> <td> <p>Can you fight with your bare hands?</p> </td> <td> <input type="checkbox" id="strengthCheckYes" onchange="StrengthCheckbox()">YES</input> <input type="checkbox" id="strengthCheckNo" onchange="StrengthCheckbox()">NO</input> </td> <td> <input type="text" id="checkboxStrengthResponse" size="60px" disabled></input> </td> </tr> <tr> <td> <p>Are you able to outrun a flying car?</p> </td> <td> <input type="checkbox" id="speedCheckYes" onchange="SpeedCheckbox()">YES</input> <input type="checkbox" id="speedCheckNo" onchange="SpeedCheckbox()">NO</input> </td> <td> <input type="text" id="checkboxSpeedResponse" size="60px" disabled></input> </td> </tr> <tr> <td> <p>Can you out play a super AI in chess?</p> </td> <td> <input type="checkbox" id="intelligenceCheckYes" onchange="IntelligenceCheckbox()">YES</input> <input type="checkbox" id="intelligenceCheckNo" onchange="IntelligenceCheckbox()">NO</input> </td> <td> <input type="text" id="checkboxIntelligenceResponse" size="60px" disabled></input> </td> </tr> </tbody> </table> 

欢迎任何帮助。 另外，我不知道jQuery，我敢肯定可以使用jQuery来完成，但如果可以的话，我只希望使用JS答案。

Answer 1

您的if语句有点偏离。 您已经有了要查找的元素，无需再次查找它们，

这是一个固定的示例：

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

 <thead> <th colspan="3">Checkbox Version</th> </thead> <tbody> <tr> <td><p>Question</p></td> <td><p>Answer</p></td> <td><p>My Response</p></td> </tr> <tr> <td><p>Can you fight with your bare hands?</p></td> <td><input type="checkbox" id="strengthCheckYes" onchange="StrengthCheckbox()">YES</input> <input type="checkbox" id="strengthCheckNo" onchange="StrengthCheckbox()">NO</input> </td> <td><input type="text" id="checkboxStrengthResponse" size="60px" disabled></input></td> </tr> <tr> <td><p>Are you able to outrun a flying car?</p></td> <td><input type="checkbox" id="speedCheckYes" onchange="SpeedCheckbox()">YES</input> <input type="checkbox" id="speedCheckNo" onchange="SpeedCheckbox()">NO</input></td> <td><input type="text" id="checkboxSpeedResponse" size="60px" disabled></input></td> </tr> <tr> <td><p>Can you out play a super AI in chess?</p></td> <td><input type="checkbox" id="intelligenceCheckYes" onchange="IntelligenceCheckbox()">YES</input> <input type="checkbox" id="intelligenceCheckNo" onchange="IntelligenceCheckbox()">NO</input></td> <td><input type="text" id="checkboxIntelligenceResponse" size="60px" disabled></input></td> </tr> </tbody> </table> 

Answer 2

您不需要strengthCheckYes和No变量。 您只能使用以下内容，因为在选择器上使用.checked会返回您想要的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!";
    }
};

jsFiddle示例

另外，请注意，您需要将最后一个条件与另一个条件分开，因为如果两个复选框都被选中，则不会达到该条件。

Answer 3

为了进一步简化并提供一些清晰度，请查看以下功能：

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中获取元素。

Answer 4

document.getElementById("strengthCheckYes").checked返回false值的true，因此请使用if(document.getElementById("strengthCheckYes").checked)或if(document.getElementById("strengthCheckYes").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!";    
}
};