CODEWITHSUNDEEP
phpjqueryajaxcheckbox
Amrinder Singh
Amrinder Singh

Reputation: 35

Want to get all values of checked checkbox using jquery

How can I get multiple checkbox values in a variable as it is showing only the last checked value on alert? I am beginner in jquery ,any help will be appreciated.

My working link is :

link

//HTML 

<table border="0">       
    <tr>
        <td>Time</td>
        <td class="weekr1">Monday</td>
        <td class="weekr1">tuesday</td>
        <td class="weekr1">Wednesday</td>
        <td class="weekr1">Thursday</td>
        <td class="weekr1">Friday</td>
        <td class="weekr1">Saturday</td>
        <td class="weekr1">Sunday</td>
    </tr>   
    <tr>
        <td class="timer1">9-11</td>  
        <td><input type="checkbox" name="checkbox" class="r1"/>select </td>
        <td><input type="checkbox" name="checkbox" class="r1"/>select </td>
        <td><input type="checkbox" name="checkbox" class="r1"/>select </td>
        <td><input type="checkbox" name="checkbox" class="r1"/>select </td>
        <td><input type="checkbox" name="checkbox" class="r1"/>select </td>
        <td><input type="checkbox" name="checkbox" class="r1"/>select </td>
        <td><input  name="checkbox" type="checkbox"  class="r1" />select</td>
    </tr>  
    <tr>
        <th class="timer2">11-1</th>  
        <td><input type="checkbox"  class="r2"/>select </td>
        <td><input type="checkbox"  class="r2" />select</td>
        <td><input type="checkbox"  class="r2"/>select </td>
        <td><input type="checkbox"  class="r2"/>select </td>
        <td><input type="checkbox"  class="r2"/>select </td>
        <td><input type="checkbox"  class="r2"/>select </td>
        <td><input type="checkbox"  class="r2"/>select </td>
    </tr>
    <tr>
        <th class="timer3">1-2</th>  
        <td><input type="checkbox"  class="r3"/>select </td>
        <td><input type="checkbox"  class="r3"/>select </td>
        <td><input type="checkbox"  class="r3"/>select </td>
        <td><input type="checkbox"  class="r3"/>select </td>
        <td><input type="checkbox"  class="r3"/>select </td>
        <td><input type="checkbox"  class="r3"/>select </td>
        <td><input type="checkbox"  class="r3" />select</td>
    </tr>
    <tr>
        <th class="timer4">2-3</th>  
        <td><input type="checkbox"  class="r4"/>select </td>
        <td><input type="checkbox"  class="r4"/>select </td>
        <td><input type="checkbox"  class="r4"/>select </td>
        <td><input type="checkbox"  class="r4"/>select </td>
        <td><input type="checkbox"  class="r4"/>select </td>
        <td><input type="checkbox"  class="r4"/>select </td>
        <td><input type="checkbox"  class="r4" />select</td>
    </tr>
</table>  
<input type="submit" id="submit" value="Save time sheet" />

//jQuery Code

$(function(){
    $('input:not(#submit)').click(function()
  { 
   t= $(this).attr('class'); 


    text= $('.time'+t).text(); 
     //alert(text);      



  });

  // For getting the Day
   $('td').click(function()
  {  
    index = this.cellIndex;   


   days = $('tr:first').find('td').eq(index).text(); 

 // alert(days);
 });  

 // for saving data into the database
   $('#submit').click(function() {
                     alert(text);
                 alert(days);


            /*     $.ajax({
                    type: "POST",
                    cache: false,       
                    url: 'save.php',
                    data: {'time='+time, 'day='+day},
                    success: function(data) {
                        alert('data has been stored to database');
                    }
                    }); */
                    });

});

Upvotes: 2

Views: 872

Answers (3)

iamawebgeek
iamawebgeek

Reputation: 2865

$(document).ready(function(){
    $('#submit').click(function(){
       var checkboxes = [];
       $('input[type="checkbox"]:checked').each(function(){
           checkboxes.push({class: $(this).attr('class'), value: $(this).val(), tr: $($(this).parents("tr")[0]).text(), td: $(this).parents("table").find("tr:eq("+ $(this).parent("td").index() +")").text()});
       });
       console.log(checkboxes);
    });
});

UPDATE Fiddle

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67207

Try,

var trs = $('table tr');
var values = trs.first().find('td');

var values1 = $('table tr td :checkbox:checked').map(function () {
  return $(this).closest('tr').find('th').text() + "==>"
         + values.eq($(this).parent().index()).text();
}).get();

DEMO

Upvotes: 1

Balachandran
Balachandran

Reputation: 9637

to get length 

 $("[type=checkbox]").change(function(){
       alert($("[type=checkbox]:checked").length);
});

use map in jquery to get all value 

$("[type=checkbox]").change(function(){
     var arr=$("[type=checkbox]:checked").map(function(){
    return this.value;
    }).get();
    alert(arr);
});

DEMO

Upvotes: 1

Related Questions