如何在 Materialise 表中使用复选框答案

【问题标题】：How to use a checkbox in Materialize table如何在 Materialise 表中使用复选框
【发布时间】：2015-07-10 04:58:30
【问题描述】：

我正在使用 Materialize，我正在尝试制作一个包含复选框的表格。不过，好像有问题。表中包含的复选框似乎不起作用。我不确定这是一个错误还是我没有做正确的事情：

<form action="#">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>My Label</td>
        <td><input type="checkbox" class="filled-in" /><label></label></td>
      </tr>
    </tbody>
  </table>
</form>

如何使用 Materialize 在表格中创建一个复选框？

http://jsfiddle.net/qa37un79/

【问题讨论】：

标签： html checkbox materialize

【解决方案1】：

您没有id 复选框和匹配的标签for 属性：

<input type="checkbox" id="myCheckbox" class="filled-in" />
<label for="myCheckbox"></label>

http://jsfiddle.net/xcmsLee9/1/

【讨论】：

似乎标签的 HTML 也需要紧跟在输入的 HTML 之后。
如果您不想要标签怎么办？该复选框不呈现:(
@Kokodoko 将标签留空？
如果我使用单个空格作为标签，这可以工作 - 但它仍然为标签保留空间，这使得布局正确。如果我在 CSS 中将标签显示设置为无，那么整个复选框将不再起作用。顺便找到原因：label渲染materialize-checkbox，materialize隐藏了真正的input元素！这使得定制变得困难:(

【解决方案2】：

试试这个：

<label>
    <input type="checkbox" />
    <span>*** Need text here ***</span>
</label>

用span 将所有内容包装在label 元素中，这是我能够显示复选框的唯一方法。

【讨论】：

【解决方案3】：

我已经编写了一小段代码，它将对象嵌套数组的数据转换为带有复选框的物化表，所以如果您不想查看任何一列，只需选择或取消选择它。

   // Using the Materilize css Check boxes change the functionality of the check bocx accordingly








var tab= document.getElementById("TransformTable");
//Get The No of Cols from the JSON data 
 var NoOfCols=Object.getOwnPropertyNames(data[0]); //Insert the row for the table headings var row = tab.insertRow(0); //set the attribute row.setAttribute("id",0+"_row"); /**  * Loop for No of Cols and set the heading and append the CheckBox  */ for(var i=0;i<NoOfCols.length;i++){ var cell1 =row.insertCell(i); cell1.setAttribute("id","0_row"+i+"_cell"); cell1.innerHTML="<b>"+NoOfCols[i]+"</b>";

    $("#checkBoxDiv").append("<input type='checkbox' id="+i+" checked='checked' style='margin:10px;'/><label for="+i+" style='margin-right:10px;'>"+NoOfCols[i]+"</label>"); } /**  *Loop for the Table data  */ // Loop for the no Of rows for(var j=0;j<data.length;j++){ var row2=tab.insertRow(j+1); row.setAttribute("id",(j+1)+"_row"); // Lopp for the No of Cols in a row for(var k=0;k<NoOfCols.length;k++){ var cell2=row2.insertCell(k); cell2.setAttribute("id",(j+1)+"_row"+k+"_cell"); cell2.innerHTML=data[j][NoOfCols[k]];   } } /**  event Listener for the check Boxes  */ $("input").click(function(event){ var id = event.target.id; if($("#"+id).prop("checked")){ DisplayTable(id); }else{ HideTable(id); } }); /**  * [HideTable Hide the col of a table]

     */ function HideTable(id){ var ColId =id; for(var t=0;t<=data.length;t++){ $("#"+t+"_row"+ColId+"_cell").css("display","none"); } } /**  * [DisplayTable Display the col of a table]

     */ function DisplayTable(id){ var ColId =id; for(var t=0;t<=data.length;t++){ $("#"+t+"_row"+ColId+"_cell").css("display","table-cell"); } }

【讨论】：