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