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

How to create html buttons with checkboxes with Jquery?

本文关键字：复选框 html 按钮 何使用 Jquery 创建      更新时间：2023-09-26

我有一个带有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>

我有另一个div类"myfilters"，当没有选中上面的复选框时，它将被隐藏。

<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>

我的问题是，当用户选中表中的"title"answers"adress"复选框时，我如何实现然后在要动态创建的div"myfilters"中，按钮"Title"和按钮"Address"？

不要动态添加按钮。在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>

试试这个：

$(function(){
  $('.mytable').on("change","input[type=checkbox]",function(){
      if($(this).is(':checked'))
      {
        var button = '<button type="button" class="btn btn-default btn-sm" id="'+$(this).val()+'">'+$(this).parent().text()+'</button>';
        $('.myfilters').append(button);
      }
      else
      {
         $('.myfilters').find('button[id="'+$(this).val()+'"]').remove();
      }
  });
});

演示

这就是您所需要的（注意，我已经添加了复选框的ID）：

<table class="mytable">
  <tr>
    <td><input id="c1" type="checkbox" value="title">Title</td>
    <td><input id="c2" type="checkbox" value="adress">Address</td>
    <td><input id="c3" type="checkbox" value="postalcode">Postal Code</td>
    <td><input id="c4" type="checkbox" value="email">Email</td>
  </tr>
</table>
<script>
$(document).ready(function(){
  $("#c1").click(function(){
    $(".myfilers").append("<button>Title</button>");
  });
  $("#c2").click(function(){
    $(".myfilers").append("<button>Address</button>");
  });
  $("#c3").click(function(){
    $(".myfilers").append("<button>Postal Code</button>");
  });
  $("#c4").click(function(){
    $(".myfilers").append("<button>Email</button>");
  });
});
</script>

这是一个小提琴演示，fiddle演示点击此处

 var myNull=null; // ignore this line
相关文章：