如何創建一個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它返回一個布爾值。