javascript - 如何使用 Jquery 创建带有复选框的 html 按钮？

Question

我有一个包含 4 个复选框的表格。让我们说标题、地址、邮政编码和电子邮件。

<table class="mytable">
         <tbody>
         <tr>
         <td> <input type="checkbox" value="title"> title </td>
        <td> <input type="checkbox" value="adress">  Adress </td>
        <td> <input type="checkbox" value="postalcode">  Postal Code </td>
        <td> <input type="checkbox" value="email">  Email </td>
         </tr>
</table>

我有另一个类为“myfilters”的 div，当上面的复选框都没有被选中时，它是隐藏的。

<div class="myfilters">
 <button type="button" class="btn btn-default btn-sm"> Title </button>

 <button type="button" class="btn btn-default btn-sm"> Adress</button>       
</div>

我的问题是如何当用户选中表格中的“标题”和“地址”复选框时然后在 div“myfilters”中动态创建按钮“Title”和按钮“Address”？

Answer 1

不要动态添加按钮。在 HTML 中创建它们，但使用 CSS 隐藏它们。然后在您点击相应的复选框时显示它们。

$(":checkbox").click(function() {
  $("#"+this.value).toggle(this.checked);
});

.btn {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable">
         <tbody>
         <tr>
         <td> <input type="checkbox" value="title"> title </td>
        <td> <input type="checkbox" value="adress">  Adress </td>
        <td> <input type="checkbox" value="postalcode">  Postal Code </td>
        <td> <input type="checkbox" value="email">  Email </td>
         </tr>
</table>

<div class="myfilters">
 <button type="button" id="title" class="btn btn-default btn-sm"> Title </button>

 <button type="button" id="adress" class="btn btn-default btn-sm"> Adress</button>   
  <button type="button" id="postalcode" class="btn btn-default btn-sm"> Postal Code</button>  
  <button type="button" id="email" class="btn btn-default btn-sm"> Email</button>  
</div>