Question

好的，所以我试图在JS中为列表项创建一个基本的切换功能。到目前为止，我已经让我的if / else语句中途工作，但我似乎无法弄清楚的问题是为什么我的其他声明不起作用。语法看起来很好，我没有看到任何一个错误出现，除了撤消直通不是这样的事实。

<li><input type="checkbox" onClick="check('box4')"><span id="box4">Mustard</span></li>

function check() {
    var el = document.getElementById('box4');
    if (el.checked = true) {
        el.style.textDecoration = "line-through";
    } else {
        el.style.textDecoration = "none";
    }
}

Answer 1

if条件错误。使用===

Answer 2

您不想检查span是否已选中，是否要检查input是否已选中。您可以将输入作为变量传递给函数，然后检查是否在JS中检查了变量。

您在比较中错过了额外的=。在您的比较中，==或===会将前者与后者进行比较。单个=将前者设置为后者。

＆＃13;

function check(el) {
  var span = document.getElementById('box4');
  if (el.checked == true) {
    span.style.textDecoration = "line-through";
  } else {
    span.style.textDecoration = "none";
  }
}

＆＃13;

<li><input type="checkbox" onClick="check(this)"><span id="box4">Mustard</span></li>

＆＃13;

Answer 3

您必须使用==或===进行比较。第一个是抽象比较，第二个是严格比较，也检查变量的类型。

如果要评估布尔变量，可以使用if(el.checked)进行简单检查。

最后，您正在评估范围值。您可以将范围中的ID更改为输入复选框：

<li><input type="checkbox" onClick="check()" id="box4"><span>Mustard</span></li>

Answer 4

if / else无效，因为您需要使用NAMESPACE而不是==。

另一方面，其余代码也无效，因为您正在检查= #box4元素，因此它没有span属性。

你也应该给复选框一个id，以确定它是否已经检查

checked

function check() {
    var el = document.getElementById('box4'),
        span = document.getElementById('box4text');
    if (el.checked == true) {
        span.style.textDecoration = "line-through";
    } else {
        span.style.textDecoration = "none";
    }
}

（因为<li><input id="box4" type="checkbox" onClick="check('box4')"><span id="box4text">Mustard</span></li>属性是一个布尔值，你真的不需要检查它是否等于true，你可以直接使用它checked ）

此外，您只需使用CSS

即可完成相同的操作

if (el.checked)

:checked + #box4{
text-decoration:line-through;
}

JS新手：非常基本的其他声明无效

4 个答案: