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

Question

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

我正在制作一个简单的复选框 table，您可以在其中问一个问题，您 select 一个答案，然后根据您的答案更新回复。用户可以单击框，响应将始终更新。我现在在我的 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 答案。

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

您不需要强度检查是和否变量。您可以仅使用以下内容，因为在您的选择器上使用 .checked 将 return 您所追求的 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

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

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 return 真假值所以使用 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!";    
}
};

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

Using Check boxes to update input text field

html

javascript

checkbox