Post
Ask Question

How to Add Multiple CheckBox in JavaScript

HTML File
  1. <div class="chbox">  
  2.     <br />  
  3. </div>  
  4. <input type="checkbox" class="ch" id="selectall" />Select All  
  5. <br />  
  6. <input type="text" id="txtName" />  
  7. <br />  
  8. <input type="button" id="btn4" value="AddCheckbox"/>  
  9. <br />  
  10. <input type="checkbox" value="Manish" id="cb1"/>  
  11. <label for="cb1">Manish</label>undefined</div>undefined<br />undefined<input type="button" class="bt1" id="btn1"value="submit" />undefined<input type="button" class="bt2" id="btn2" value="Inventor" />undefined<input type="button" class="bt3" id="btn3" value="Clear" />   
Javascript File
  1. $(document).ready(function() {  
  2.     $("#btn1").click(function() {  
  3.         $(".chbox").text('');  
  4.         $(".div2 input:checkbox").each(function() {  
  5.             var $this = $(this);  
  6.             var str = "";  
  7.             if ($this.is(":checked")) {  
  8.                 $(".chbox").text($(".chbox").text() + " , " + $this.attr("value"));  
  9.             }  
  10.             var checked = $("input:checked").length > 0;  
  11.             if (!checked) {  
  12.                 alert("Please check at least one checkbox");  
  13.                 return false;  
  14.             }  
  15.         });  
  16.     });  
  17.     $("#btn4").click(function() {  
  18.         addCheckbox($('#txtName').val());  
  19.         $("#txtName").val('');  
  20.   
  21.     });  
  22.   
  23.     function addCheckbox(name) {  
  24.         var container = $('.div2');  
  25.         var inputs = container.find('input');  
  26.         var id = inputs.length + 1; {  
  27.             $('<input />', {  
  28.                 type: 'checkbox',  
  29.                 id: 'cb1' + id,  
  30.                 value: name  
  31.             }).appendTo(container);  
  32.             $('<label />', {  
  33.                 'for': 'cb1',  
  34.                 text: name  
  35.             }).appendTo(container);  
  36.   
  37.         }  
  38.     }  
  39.     $('#btn2').click(function() {  
  40.         $(".div2 input:checkbox").each(function() {  
  41.             var $a = $(this);  
  42.             if ($a.is(":checked")) {  
  43.                 ($a.attr('checked', false));  
  44.             } else if ($a.is(":not(:checked)")) {  
  45.                 ($a.attr('checked', true));  
  46.             }  
  47.         });  
  48.     });  
  49.     $("#btn3").click(function() {  
  50.         $("input:checkbox").removeAttr('checked');  
  51.         $(".chbox").text('');  
  52.     });  
  53.   
  54.     $("#selectall").change(function() {  
  55.         if (this.checked) {  
  56.             $(".div2 input:checkbox").each(function() {  
  57.                 this.checked = true;  
  58.             })  
  59.         } else {  
  60.             $(".div2 input:checkbox").each(function() {  
  61.                 this.checked = false;  
  62.          })  
  63.      }  
  64. });