如何创建一个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>

但设计不起作用，idk为什么，任何人都可以帮助我？

Answer 1

我设法让你想通过以下两条额外的线条效果：

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

下面是一些有关componentHandler。

这是一个工作pen。

Answer 2

仅供参考对于MDC-Web，不推荐使用MDL，但是如果您必须使用MDL，您可以像使用其他任何复选框一样获取它，即document.getElementByID（“checkbox1”）。checked它返回一个布尔值。