Question

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

我正在制作一个简单的复选框表，在这里您会被问到一个问题，您选择一个答案，并根据您的答案更新答案。用户可以单击这些框，并始终更新响应。我现在只在我的JS中只有一个函数，因为我在编写其他两个函数之前试图让它先工作。这就是我所拥有的。

activity.displayDialog(msg);

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

欢迎任何帮助。另外，我不知道jQuery，我确信它可以使用它完成，但如果可以，我只想要JS答案。

Answer 1

您的if陈述有点偏离。您已经拥有了所需的元素，无需再次查找，

这是一个固定的例子：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你不需要你的力量检查和没有变数。您可以使用以下内容，因为在您的选择器上使用.checked将返回您之后的真实或fla：

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返回false值所以请使用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!";    
}
};

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

4 个答案: