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

Using Check boxes to update input text field

本文关键字：文本 字段 输入 更新 复选框      更新时间：2023-09-26

我正在学习如何用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的答案，如果你可以的话。

您的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>

你不需要你的强项checkyes和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!";
    }
};
<<p> jsFiddle例子/strong>

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

为了进一步简单明了，看一下下面的函数:

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检查它们是否被选中。检查并做出相应反应。这样做的额外好处是，每次函数运行时只需要从DOM中获取元素一次。

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!";    
}
};
相关文章：