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

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，我确信它可以用它来完成，但如果可以的话，我只想要 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>