如何创建一个 mdl 复选框元素答案

【问题标题】：How create a mdl checkbox element如何创建一个 mdl 复选框元素
【发布时间】：2017-07-07 04:05:10
【问题描述】：

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>

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

【问题讨论】：

“不起作用”不是问题描述。请解释一下代码应该做什么，以及它做了什么。

标签： javascript html material-design element

【解决方案1】：

我设法通过使用以下两行附加行来获得您想要的效果：

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

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

这是一个有效的pen。

【讨论】：

【解决方案2】：

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

【讨论】：