复选框和文字显示

Question

从输入模式中选中复选框后，尝试在<p>中显示文本。

var mayo1 = document.getElementById('mayo1').checked;

if (mayo1.checked == true){
            document.getElementById('order1mayo').innerHTML = "Mayo";
 } 

<input type="checkbox" id="mayo1" value="Mayo"> Mayo
<p id="order1mayo"></p>

    

Answer 1

您只需使用if (mayo1 == true)

Answer 2

输入字段checked属性为true或false。因此，您的mayo1变量可以是true或false布尔类型。在这种情况下if（mayo1.checked == true）是一个错误。 正确的条件是if（mayo1）{...}

Answer 3

发生问题是因为您的代码

if (mayo1.checked == true){
            document.getElementById('order1mayo').innerHTML = "Mayo";
 } 

仅在启动后立即执行一次。您的复选框当时未选中，因此没有任何反应。

您必须使用eventListener注意更改，并根据当前复选框状态更改文本内容。有关详细信息，请参见this example。

Answer 4

您需要实际处理一个事件然后从那里去；

isChecked = (i) => {
    const o = document.getElementById("order1mayo");
    i === true ?
      o.innerHTML = "Mayo":
      o.innerHTML = "NO Mayo";
}

<input type="checkbox" 
       id="mayo1" 
       value="Mayo" 
       onchange="isChecked(this.checked)">Mayo
       
<h4 id="order1mayo"></h4>

Answer 5

您的mayo1 var是true还是false取决于您的复选框，因此mayo1.checked是错误的表达式...

试试这个...

if (mayo1) {
  document.getElementById('order1mayo').innerHTML = "Mayo";
}

Answer 6

您试图查看mayo1.checked.checked是否正确-仅使用一个checked：\

var mayo1 = document.getElementById("mayo1").checked;
if (mayo1) {
    document.getElementById("order1mayo").innerHTML = "Mayo";
}