使用復選框更新輸入文本字段

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!";    
}
};