如何使用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> 

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

我的问题是如何实现当用户检查可以说“称号”，并在表 然后在div“myFilters的”动态创建按钮“标题“住址”复选框 “和按钮”地址“？

Answer 1

试试这个：

$(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(); 
     } 
    }); 
}); 

Demo

Answer 2

这是你所需要的（请注意，我添加的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> 

Answer 3

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

Answer 4

这里是一个小提琴演示，FIDDLE DEMO CLICK HERE

var myNull=null; // ignore this line