Want to get all values of checked checkbox using jquery

Question

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');
                    }
                    }); */
                    });

});

Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a Minimal, Complete, and Verifiable example. — Satpal
– Satpal, Commented Jul 21, 2014 at 7:05

Rajaprabhu Aravindasamy · Accepted Answer · 2014-07-21 07:26:00Z

1

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

edited Jul 21, 2014 at 7:26

answered Jul 21, 2014 at 7:08

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

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

1 Comment

Amrinder Singh Over a year ago

Hello , when i select Monday it is again not showing the time.

Balachandran · Accepted Answer · 2014-07-21 07:18:40Z

1

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

edited Jul 21, 2014 at 7:18

answered Jul 21, 2014 at 7:08

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

1 Comment

Balachandran Over a year ago

@RajaprabhuAravindasamy how did you say like that ..if you wont set the value the chekbox if it is seleted then the value is on .that is default value

iamawebgeek · Accepted Answer · 2014-07-21 07:34:12Z

1

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

edited Jul 21, 2014 at 7:34

answered Jul 21, 2014 at 7:08

iamawebgeek

2,8951 gold badge22 silver badges35 bronze badges

2 Comments

Amrinder Singh Over a year ago

Hello,thanks for comment , where should i put this code ? in my code

iamawebgeek Over a year ago

@AmrinderSingh checkout the console (in the inspections tab) after click. Is it the thing you wanted?

Collectives™ on Stack Overflow

Want to get all values of checked checkbox using jquery

3 Answers 3

DEMO

1 Comment

DEMO

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related