2015-05-29 80 views
1

我正在學習如何使用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,我敢肯定它可以使用它來完成,但如果可以的話,我只想要JS答案。

+0

有什麼問題嗎? – Liam

+0

你有什麼樣的方程式,如果我認爲它們不相等,你必須改變你的左手邊。例如strengthCheckYes.checked === ... –

回答

2

您的if聲明有點偏離。你已經擁有你所尋找的元素,沒有必要再找一找,

這裏有一個固定的例子:

function StrengthCheckbox() 
 
{ 
 
\t var strengthCheckYes=document.getElementById("strengthCheckYes"); 
 
\t var strengthCheckNo=document.getElementById("strengthCheckNo"); 
 

 
\t if(strengthCheckYes.checked && !strengthCheckNo.checked) 
 
\t { 
 
\t \t document.getElementById("checkboxStrengthResponse").value="You wrestled Putin in your past life didn't you?"; 
 
\t } 
 
\t else if(strengthCheckNo.checked && !strengthCheckYes.checked) 
 
\t { 
 
\t \t document.getElementById("checkboxStrengthResponse").value="That could be a problem sometime in the future"; \t 
 
\t } 
 
\t else if((strengthCheckYes.checked) && (strengthCheckNo.checked)) 
 
\t { 
 
\t \t document.getElementById("checkboxStrengthResponse").value="So which is it? Yes or No? Stop playing around!"; \t 
 
\t } 
 
};
<thead> 
 
\t \t \t <th colspan="3">Checkbox Version</th> 
 
\t \t </thead> 
 
\t \t <tbody> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><p>Question</p></td> 
 
\t \t \t \t <td><p>Answer</p></td> 
 
\t \t \t \t <td><p>My Response</p></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><p>Can you fight with your bare hands?</p></td> 
 
\t \t \t \t <td><input type="checkbox" id="strengthCheckYes" onchange="StrengthCheckbox()">YES</input> 
 
\t \t \t \t \t <input type="checkbox" id="strengthCheckNo" onchange="StrengthCheckbox()">NO</input> 
 
\t \t \t \t </td> 
 
\t \t \t \t <td><input type="text" id="checkboxStrengthResponse" size="60px" disabled></input></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><p>Are you able to outrun a flying car?</p></td> 
 
\t \t \t \t <td><input type="checkbox" id="speedCheckYes" onchange="SpeedCheckbox()">YES</input> 
 
\t \t \t \t \t <input type="checkbox" id="speedCheckNo" onchange="SpeedCheckbox()">NO</input></td> 
 
\t \t \t \t <td><input type="text" id="checkboxSpeedResponse" size="60px" disabled></input></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr> 
 
\t \t \t \t <td><p>Can you out play a super AI in chess?</p></td> 
 
\t \t \t \t <td><input type="checkbox" id="intelligenceCheckYes" onchange="IntelligenceCheckbox()">YES</input> 
 
\t \t \t \t \t <input type="checkbox" id="intelligenceCheckNo" onchange="IntelligenceCheckbox()">NO</input></td> 
 
\t \t \t \t <td><input type="text" id="checkboxIntelligenceResponse" size="60px" disabled></input></td> 
 
\t \t \t </tr> 
 
\t \t </tbody> 
 
\t </table>

+0

非常感謝你的幫助。這就像我想要的一樣。 – ShadowManes

+0

很高興爲您提供幫助。如果它對你有幫助,請接受答案。 – dave

+0

我會一旦它允許我。 IT讓我在幾分鐘之內就可以接受它 – ShadowManes

0

你不需要你strengthCheckYes並沒有變量。您可以只使用下面因爲使用您選擇.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 example

另外請注意,您需要單獨從最後一個條件另一個,因爲如果兩個複選框都被選中,它將不會被觸及。

0

爲了簡單,甚至更進一步,提供一點清晰的,看看下面的函數:

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

+0

這是一個很好的簡化版本,裏面有我以及上面發佈的@dave。這也很有用。感謝您的回覆 – ShadowManes

+0

我的榮幸。當像這樣使用JavaScript時,我喜歡首先獲取所有需要的元素,然後在函數中應用邏輯。我發現它有助於降低複雜性,或者在需要時更容易進行更改。 – Vaune

+0

這和我在大學教C++的方式一樣。當我使用JS時,我應該在將來應用越來越多 – ShadowManes

0

document.getElementById("strengthCheckYes").checked返回假值 的真實所以使用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!";  
} 
};