来自JavaScript的MDL Checkbox复选框

Question

以下是我试图取消/选中MDL复选框的代码和小提琴。取消/检查后，状态/ UI /设计不会更新。尝试过这种SO解决方案，但是没有用。

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value='0' />
    <span class="mdl-checkbox__label">Check Me</span>
</label>
<input type='button' value='check/uncheck' id='btn' />

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value='0' />
    <span class="mdl-checkbox__label">Check Me</span>
</label>
<input type='button' value='check/uncheck' id='btn' />

https://jsfiddle.net/aLfqkL4q/1/

Answer 1

您需要定位标签，而不是输入。看到这个小提琴

<label id="check" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
    <input id="MdlCheckBox" type="checkbox" class="mdl-checkbox__input" value='0' />
    <span class="mdl-checkbox__label">Check Me</span>
</label>
<input type="button" value="test check" id="btn"/>

$("#btn").click(function() {
    if($('#check').is('.is-checked')) {
    document.querySelector('#check').MaterialCheckbox.uncheck();
  }
  else {
    document.querySelector('#check').MaterialCheckbox.check();
  }
});