Question

我正在使用HTML通过<input>创建清单。这是我的代码的一小部分。

<input type="checkbox" value="Expedia" />
<img src="http://cruise360.org/media/ex_logos/3zp4zr1avvnfydluitkn4yur31iveig3172013_111844.jpg" style="width:236px;height:135px;" />
<br />

如何创建一个设置为0或1的javascript变量，具体取决于是否选中该选项。例如，我有类似的东西：

if (box is checked..) {
  expediaChecked == 1
} else {
  exediaChecked==0
}

如何连接HTML和Javascript？谢谢。

Answer 1

这将解决您的问题：

function myFunction(cb) {
expediaChecked = cb.checked ? 1 : 0;
    console.log(expediaChecked);  
}

<input type="checkbox" value="Expedia" onchange="myFunction(this)"><img src="http://cruise360.org/media/ex_logos/3zp4zr1avvnfydluitkn4yur31iveig3172013_111844.jpg" style="width:236px;height:135px;"><br>

Answer 2

您需要某种方法来识别输入。我会在那里粘贴一个id来使它更干净/更快，但你可以使用class / tag。

if(document.getElementById('expediaBox').checked){
  expediaChecked = 1;
}else{
  expediaChecked = 0;
}

如果您愿意，我相信您可以排队：

expediaChecked = document.getElementById('expediaBox').checked ? 1 : 0;

编辑：显然，如果您使用的是现代浏览器，则可以使用document.querySelectorAll（'input [value =“Expedia”]'）代替document.getElement。

Answer 3

定义onchange处理程序

<input id="expediaBox" type="checkbox" value="Expedia" />

document.getElementById('expediaBox').onchange = function(e) {
  expediaChecked = e.target.checked ? 1 : 0;
  // debug it
  console.log('checkbox checked', expediaChecked);
}

如何从<input />获取数据并将其转换为JS变量

3 个答案: