想要使用jquery获取已选中复选框的所有值

Question

如何在变量中获取多个复选框值，因为它只显示警告中的最后一个检查值？我是jquery的初学者，任何帮助都将受到赞赏。

我的工作链接是：

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

});

Answer 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);
    });
});

<强>更新 Fiddle

Answer 2

得到长度

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

在jquery中使用map来获取所有值

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

DEMO

Answer 3

尝试，

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