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

Posted 2023-05-08

【中文标题】想要使用 jquery 获取选中复选框的所有值

【英文标题】：Want to get all values of checked checkbox using jquery

【发布时间】：2014-09-11 14:49:10

【问题描述】：

我如何在一个变量中获取多个复选框值，因为它只显示警报时最后检查的值？我是 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代码

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

);

【问题讨论】：

代码就是代码？？？？？？找不到它的文件

寻求调试帮助的问题（“为什么这段代码不起作用？”） 必须包括所需的行为、特定问题或错误以及重现所需的最短代码问题本身。 没有明确问题陈述的问题对其他读者没有用处。见：How to create a Minimal, Complete, and Verifiable example.

请立即查看，不便之处见谅

【参考方案1】：

试试，

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

【讨论】：

您好，当我选择星期一时，它又没有显示时间。

【参考方案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

【讨论】：

@RajaprabhuAravindasamy 你怎么这么说..如果你不设置复选框的值，如果它被选中，那么这个值是 on 。这是默认值

【参考方案3】：

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

【讨论】：

你好，谢谢你的评论，我应该把这段代码放在哪里？在我的代码中

@AmrinderSingh 单击后检查控制台（在检查选项卡中）。是你想要的吗？