title: How to select the check box on button click
body: <p>In the users tab there are some rows having check boxes. So if more than 2 check boxes are selected then a button named group appears.</p>
  
  <p>Now when group button is clicked then then it will ask for a name and after pressing the ok button on the right side in the group table a group is created. For example select 1st and last row and click the group button. A dialog box appears asking to enter name. Enter test in the input field, after that in the right side group table test appears(please see the screenshot).</p>
  
  <p>Now my question: is if I click the test(group name) now then on the left side the checkboxes will be selected. So in my case 1st check box and last check box will be selected. Please tell me how to do this. This is the <a href="http://jsfiddle.net/4GP9c/238/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p>The js codes are as follows</p>
  
  <pre><code>$(function() { 
      $("#datetimepicker").datetimepicker({ 
          format: "'dd/MM/yyyy hh:mm:ss'", 
          linkField: "#txt", 
          linkFormat: "yyyy-mm-dd hh:ii", 
          autoclose: true, 
      }); 
  
      jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){ 
          $(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val()); 
      }); 
  
  }); 
  $('#tabAll').click(function(){ 
      $('#tabAll').addClass('active'); 
      $('.tab-pane').each(function(i,t){ 
          $('#myTabs li').removeClass('active'); 
          $(this).addClass('active'); 
      }); 
  }); 
  $('body').on('click', '.btn', function(){ 
      if(this.id=='openAlert') {
          $('#number').val('');}else{$('#number').val(this.id);
      }
  });
  $(document).ready(function(){
      $("#signout").click(function() { 
          window.location.replace("logout.jsp"); 
      });
      //next line
  /*var val=0;
  $(document).ready(function(){
  
  
    $('#btn1').click(function(){
        if($(".span4").val()!="")
        {
    $("#mytable").append('&lt;tr id="mytr'+val+'"&gt;&lt;/tr&gt;');
    $("#mytr"+val).append('&lt;td class=\"cb\"&gt;&lt;input type=\"checkbox\" value=\"yes\" name="mytr'+val+'" checked &gt;&lt;/td&gt;');
  
               $(".span4").each(function () {
  
               $("#mytr"+val).append("&lt;td &gt;"+$(this).val()+"&lt;/td&gt;");
  
                });
                val++;
        }
        else
        {
            alert("please fill the form completely");
        }
                });
      $('#btn2').click(function(){
          var creat_group=confirm("Do you want to creat a group??");
          if(val&gt;1){
             alert(creat_group);
  
  
                }
      });
  
  
  
  
  });*/
  var val = 0;
  var groupTrCount = 0;
  $(document).ready(function () {    
      var obj={};
      $('#btn1').click(function () {
          if ($(".span4").val() != "") {
              $("#mytable").append('&lt;tr id="mytr' + val + '"&gt;&lt;/tr&gt;');
              $tr=$("#mytr" + val);
              $tr.append('&lt;td class=\"cb\"&gt;&lt;input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" unchecked &gt;&lt;/td&gt;');
              $(".span4").each(function () {
                  $tr.append("&lt;td &gt;" + $(this).val() + "&lt;/td&gt;");
              });
              var arr={};
              name=($tr.find('td:eq(1)').text());
              email=($tr.find('td:eq(2)').text());
              mobile=($tr.find('td:eq(3)').text());
              arr['name']=name;arr['email']=email;arr['mobile']=mobile;
              obj[val]=arr;
              val++;
          } else {
              alert("please fill the form completely");
          }
      });
      $(document).on('click', '#btn2',function () {
          var email=new Array();
          var username=new Array();
          var mobno=new Array();
          var grpname;
          var creat_group = prompt("Name your group??");
          grpname=creat_group;
  
          if (creat_group) {
              console.log(obj);
              $("#groupTable").append('&lt;tr id="groupTr' + groupTrCount + '"&gt;&lt;/tr&gt;');
              $tr=$("#groupTr" + groupTrCount);
              $tr.append("&lt;td &gt;" + creat_group + "&lt;/td&gt;");
              $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
                  var count=0;
                  var arrid=0;
                  $(this).find('td').each(function() {
  
                      //your ajax call goes here
                      if(count == 1){
                          username[arrid]=$(this).html();        
                      }
                    if(count==2)
                      {
                          email[arrid]=$(this).html();
                      }
                      if(count==3)
                      {
                          mobno[arrid]=$(this).html();
                      }
                      count++;
                      });
                  arrid++;
              });
              $.ajax(
                 {
                     type: "POST",
                     url: "messageSending.jsp", //Your full URL goes here
                     data: { username: username, email: email,mobno:mobno,grpname:grpname},
                     success: function(data, textStatus, jqXHR){
                         alert(data);                  
                     },
                     error: function(jqXHR){
                         alert(jqXHR.responseStatus);
                     }
                 });
          groupTrCount++;
          }        
      });
      $(document).on('change','#mytable input:checkbox',function () {
          if(!this.checked)
          {
              key=$(this).attr('name').replace('mytr','');
              alert(key);
              obj[key]=null;
          }
  //show group
  if($('#mytable input:checkbox:checked').length &gt; 1) {
          $('#btn2').removeClass('hide')
      }
      else {
          $('#btn2').addClass('hide')
      }
  //
      });
  });
  
  
  //
          $('#openAlert').click(function(){
  
              var number = $('#number').val(); // If its a text input could use .text()
              var msg = $('#darea').val(); //If its a text input could use .text()
  alert(msg);
              $.ajax(
                  {
                      type: "POST",
                      url: "messageSending.jsp", //Your full URL goes here
                      data: { toNumber: number, body: msg},
                      success: function(data, textStatus, jqXHR){
                          alert(data);                  
                      },
                      error: function(jqXHR){
                          alert(jqXHR.responseStatus);
                      }
                  });
          });
      });
  $(function ()  
  { $("#number").popover({title: 'Enter Mobile Number',content: "Please enter 10 digit mobile number prefixed by country code eg +911234567890"});  
  });  
  $(function ()  
  { $("#body").popover({title: 'Message Body',content: "Maximum 160 characters allowed"});  
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/1enn5.png" alt="enter image description here"></p>