title: checking group of dynamically created checkbox
body: <p><strong>I am creating group of check boxes dynamically and one extra check box also for selecting all group at once that one too is generated dynamically</strong></p>
  
  <p><strong>this is html output</strong></p>
  
  <pre><code>&lt;input type="checkbox" id="all"&gt;all
  &lt;br&gt;
  &lt;input type="checkbox" name="question"&gt;a
  &lt;br&gt;
  &lt;input type="checkbox" name="question"&gt;b
  &lt;br&gt;
  &lt;input type="checkbox" name="question"&gt;c
  &lt;br&gt;
  &lt;input type="checkbox" name="question"&gt;d
  </code></pre>
  
  <p><strong>this is jquery</strong></p>
  
  <pre><code>$("document").ready(function() {
      $("#all").on('change', function() {
          if ($(this).is(":checked")) {
              $("input[type=checkbox][name=question]").prop('checked', true);
          } else {
              $("input[type=checkbox][name=question]").prop('checked', false);
          }
      });     
  
  });
  </code></pre>
  
  <p>this is implementation. </p>
  
  <p>It works fine when checkboxes are not generated dynamically</p>
  
  <p><strong>But when they are generated dynamically code has bug</strong></p>
  
  <p>I am able to check whole group but
  I am not able to check single checkbox</p>
  
  <p><strong>This is dynamically generated code</strong></p>
  
  <pre><code>$('#demo3').on('change', function() {
      if ($('input[type=checkbox]:checked')) {
          var value = $('input[type=checkbox]:checked').val();
          alert(value);
          $("#demo3").hide();
  
          $.getJSON("json/question.json", function(jd) {
  
              var size = jd.length;
  
  
              var table = "&lt;table&gt;&lt;tr&gt;&lt;th&gt;&lt;input id=\"" + "selectall" + "\" type=\"" + "checkbox" + "\"/&gt;" +
                      "&lt;/th&gt;&lt;th&gt;Question&lt;/th&gt;&lt;th&gt;Option A&lt;/th&gt;" + "&lt;th&gt;Option B&lt;/th&gt;&lt;th&gt;Option C&lt;/th&gt;" +
                              "&lt;th&gt;Option D&lt;/th&gt;&lt;th&gt;Answer&lt;/th&gt;&lt;/tr&gt;";
  
  
              for (var n = 0; n &lt; size; n++) {
  
  
                  table += "&lt;tr&gt;&lt;td&gt;" + "&lt;input name=\"" + "question" + "\" type=\"" + "checkbox" + "\" value=\"" + jd[n].questionid + "\"/&gt;" + 
                  "&lt;/td&gt;&lt;td&gt;" + jd[n].question + "&lt;/td&gt;" + "&lt;td&gt;" + jd[n].a + "&lt;/td&gt;&lt;td&gt;" + jd[n].b + "&lt;/td&gt;" + "&lt;td&gt;" + jd[n].c + "&lt;/td&gt;" +
                          "&lt;td&gt;" + jd[n].d + "&lt;/td&gt;" + "&lt;td&gt;" + jd[n].ans + "&lt;/td&gt;&lt;/tr&gt;";
  
  
              }
              table += "&lt;/table&gt;";
              $('#demo4').html(table);
  
          });
  
      }
  });
  
  $('#demo4').on('change', function() {
      if ($("input[type=checkbox][id=selectall]").is(":checked")) {
          $("input[type=checkbox][name=question]").prop('checked', true);
      } else {
          $("input[type=checkbox][name=question]").prop('checked',false);
      }
  
  });
  </code></pre>