如何创建 mdl 复选框元素

Question

通过getmdl.io，复选框元素是：

#d{
padding:20px

<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.deep_purple-blue.min.css" rel="stylesheet"/>
<div id="d">
<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
 <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
 <span class="mdl-checkbox__label">Checkbox</span>
</label>

我尝试用 js 添加这个元素

function addCB(){
  var cb = document.createElement('div');
  cb.innerHTML = `<label for="chkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
 <input type="checkbox" id="chkbox1" class="mdl-checkbox__input">
 <span class="mdl-checkbox__label">Checkbox</span>
</label>`;
  document.getElementById('d').appendChild(cb);
}

#d{
padding:20px

<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
<link href="https://code.getmdl.io/1.3.0/material.deep_purple-blue.min.css" rel="stylesheet"/>
<div id="d">
<button class="mdl-button mdl-js-button mdl-js-ripple-effect " onClick="addCB()">Add checkbox</button>

但是设计不起作用，我不知道为什么，谁能帮助我？

Answer 1

FYI MDL 已被 MDC-Web 弃用，但是如果您必须使用它，您可以像使用任何其他复选框一样使用它，即 document.getElementByID("checkbox1").checked which returns 一个布尔值。

Answer 2

我通过使用以下另外两行设法获得了您想要的效果：

componentHandler.upgradeDom('MaterialCheckbox');
componentHandler.upgradeAllRegistered();

这里是一些关于componentHandler的信息。

这是一个有效的 pen。

如何创建 mdl 复选框元素

How create a mdl checkbox element

html

javascript

element

material-design