How to create html buttons with checkboxes with Jquery?

Question

I have a table with 4 checkboxes. Lets say with Title,Adress,Postal Code and Email.

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

I have another div with class "myfilters" which is hidden when none of the above checkboxes are checked.

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

My question is How can I implement when a user checks lets say "title" and "adress" checkboxes in the table then inside the div "myfilters" to be created dynamically the buttons "Title" and the Button "Address" ?

do you want to add button title after checking the checkbox title? — CodeSlayer
– CodeSlayer, Commented Sep 23, 2014 at 7:34
you can use .append() w3schools.com/jquery/jquery_dom_add.asp — Vitorino fernandes
– Vitorino fernandes, Commented Sep 23, 2014 at 7:35

Barmar · Accepted Answer · 2014-09-23 07:42:00Z

3

Don't add the buttons dynamically. Create them in the HTML, but hide them with CSS. Then show them when you click on the corresponding checkbox.

$(":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>

answered Sep 23, 2014 at 7:42

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mysteryos Over a year ago

+1, This solution will run faster than js scripts that are creating and appending html to the DOM.

Bhushan Kawadkar · Accepted Answer · 2014-09-23 07:45:57Z

1

try this :

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

edited Sep 23, 2014 at 7:45

answered Sep 23, 2014 at 7:38

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Comments

jondinham · Accepted Answer · 2014-09-23 07:40:00Z

This is what you need (notice that I've added the IDs for checkboxes):

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

Faizy · Accepted Answer · 2014-09-23 08:03:18Z

0

Here is a fiddle Demo, FIDDLE DEMO CLICK HERE

 var myNull=null; // ignore this line

answered Sep 23, 2014 at 8:03

Faizy

217 bronze badges

Collectives™ on Stack Overflow

How to create html buttons with checkboxes with Jquery?

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related