javascript - Materializecss 的复选框输入不适用于 jQuery

Question

我正在构建 Simon 游戏，我正在使用 Materialize.css 库中的两组 checkbox inputs。

如官方所示docs , 这是 checkbox 的片段 -

<p>
  <input type="checkbox" id="test5" />
  <label for="test5">Red</label>
</p> 

问题是，当我尝试使用 jQuery 检测 checkbox 是否被 checked 时，它似乎根本不起作用。我已经尝试了 is(":checked") 和 prop("checked")，但都不起作用。

/**
 * Created by manishgiri on 12/26/16.
 */
$(document).ready(function () {
    if($("#start").is(":checked")) {
        console.log("inside");
        console.log("Start is checked");
    }
    if($("#start").prop("checked")) {
        console.log("inside");
        console.log("Start is checked");
    }
    //console.log("outside");
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
      <input type="checkbox" id="start" />
      <label for="start">Start</label>
    </p>

这是 Codepen 上的完整应用程序.如果有任何帮助，我将不胜感激!

Answer 1

您的代码按照编写的方式运行 - 在 $(document).ready(DOM 加载)上，正在查看复选框以查看它是否被选中。因为代码只运行一次，所以当复选框发生变化时它不会做任何事情。

要获得所需的行为，您需要对输入使用 onchange 事件。这是 jQuery 风格的:

/**
 * Created by manishgiri on 12/26/16.
 */
$(document).ready(function() {
  $('#start').on('change', function() {
    if ($(this).is(':checked')) {
      console.log('Start is checked');
    }
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p>
  <input type="checkbox" id="start" />
  <label for="start">Start</label>
</p>