Materialisecss的复选框输入不能与jQuery一起使用

I am building the Simon game, and I'm using two sets of checkbox inputs from the Materialize.css library.

我正在构建Simon游戏,我正在使用Materialize.css库中的两组复选框输入。

As shown in the official docs, here's the snippet for the checkbox -

正如官方文档中所示,这是复选框的片段 -

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

The problem is, it doesn't seem to work at all when I try to detect if the checkbox is checked, using jQuery. I have tried both is(":checked") and prop("checked"), but neither works.

问题是,当我尝试使用jQuery检测是否选中了复选框时,它似乎根本不起作用。我试过两个是(“: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>

Here's the complete app on Codepen. I would appreciate any help!

这是Codepen上的完整应用程序。我将不胜感激任何帮助!

1 个解决方案

#1

Your code is functioning as it is written - on $(document).ready (DOM load), the checkbox is being looked at to see whether or not it is checked. Because the code is only run once, it won't do anything when the checkbox is changed.

您的代码在写入时运行 - 在$(document).ready(DOM加载)上,正在查看复选框以查看是否已选中它。因为代码只运行一次,所以当复选框被更改时它不会执行任何操作。

To get the behavior you want, you need to use the onchange event on the input. Here it is jQuery-style:

要获得所需的行为,您需要在输入上使用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>