Question

我想知道如何使用jquery获取与复选框相关的所有值。从该图片中，当选中复选框时，与复选框相关的所有值都可以添加到数组中或提醒用户。表的代码如下

＆＃13;

<table style="border:1px solid black;">
    <tbody>
    	<tr>
        	<th><input type="checkbox" id="chkAll" name="chkAll"></th>
        	<th>From</th>
        	<th>Request</th>
        	<th>Expires on</th>
        	<th>Post Date</th>
        	<th>Location</th>
    	</tr>
    </tbody>
    <tbody id="showtable">
        <tr>
            <td style="border:1px solid black;"><input type="checkbox" value="fridge" id="1" name="request[]" class="request"> </td>
            <td style="border:1px solid black;"><b><a href="user/">user1</a></b></td><td style="border:1px solid black;"><b>fridge</b></td>
            <td style="border:1px solid black;"><b>12-01-2015</b></td><td style="border:1px solid black;"><b>11/6/2014 2:25 pm</b></td>
            <td style="border:1px solid black;"><b></b></td>
        </tr>
        <tr>
            <td style="border:1px solid black;"><input type="checkbox" value="pizza" id="6" name="request[]" class="request"> </td>
            <td style="border:1px solid black;"><b><a href="user/">user2</a></b></td><td style="border:1px solid black;"><b>pizza</b></td>
            <td style="border:1px solid black;"><b>12-01-2015</b></td><td style="border:1px solid black;"><b>11/7/2014 4:31 pm</b></td>
            <td style="border:1px solid black;"><b></b></td>
        </tr>
    </tbody>
</table>

＆＃13;

我该怎么做？如果您需要任何其他资源，请告诉我。

Answer 1

使用jquery val()方法。

 $('.request').change(function(){
   alert(this.value); //using DOMelement value proprty
   or
   alert($(this).val());
 });

获取所有选中的值并将其传递给数组，您可以使用.map

$('.request').change(function(){
       var checkedvalues = $('.request:checked').map(function(){
          return this.value
        }).get()
       console.log(checkedvalues);
     });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border:1px solid black;">
    <tbody>
    	<tr>
        	<th><input type="checkbox" id="chkAll" name="chkAll"></th>
        	<th>From</th>
        	<th>Request</th>
        	<th>Expires on</th>
        	<th>Post Date</th>
        	<th>Location</th>
    	</tr>
    </tbody>
    <tbody id="showtable">
        <tr>
            <td style="border:1px solid black;"><input type="checkbox" value="fridge" id="1" name="request[]" class="request"> </td>
            <td style="border:1px solid black;"><b><a href="user/">user1</a></b></td><td style="border:1px solid black;"><b>fridge</b></td>
            <td style="border:1px solid black;"><b>12-01-2015</b></td><td style="border:1px solid black;"><b>11/6/2014 2:25 pm</b></td>
            <td style="border:1px solid black;"><b></b></td>
        </tr>
        <tr>
            <td style="border:1px solid black;"><input type="checkbox" value="pizza" id="6" name="request[]" class="request"> </td>
            <td style="border:1px solid black;"><b><a href="user/">user2</a></b></td><td style="border:1px solid black;"><b>pizza</b></td>
            <td style="border:1px solid black;"><b>12-01-2015</b></td><td style="border:1px solid black;"><b>11/7/2014 4:31 pm</b></td>
            <td style="border:1px solid black;"><b></b></td>
        </tr>
    </tbody>
</table>

检查控制台是否有检查值

Answer 2

我创建了以下代码，为我解决了这个问题：

$('#send_kaving').click(function() {
                    arr=Array();
                    arrNew=[];
                    //arrNew[k]=Array();
                    jQuery('#showtable input:checkbox:checked').each(function(){
                        var v=jQuery(this).val();
                        arr.push(v);
                    });
                    jQuery.each(arr,function(ke,v){
                        var k=ke;
                        arrNew[k]=[];
                        jQuery("#showRequest"+v).find("td").each(function(key,val){
                            // alert(k);
                            var x=jQuery(this).text();
                            arrNew[k].push(x);
                        });
                    });
                    alert(arrNew);

                });

首先从表中获取已检查项的所有值并将其存储在数组中。然后从数组值中获取表行复选框的相关值。

Answer 3

要获取数组中已选中复选框的所有值，您可以将:checked selector与.map()结合使用

var values = $('#showtable input:checkbox:checked').map(function(){
    return this.value
}).get();
alert(values);

这可以在任何你想要的地方调用

Answer 4

var array = [];
//Filter out the check all th - Also assumes that this table is the only table on the page. If it is not then give the table an id
var $th = $('th:gt(0)');
$('#showtable input:checkbox').on('change',function(){
    var userInfo = {};


    $(this).parent().siblings().each(function(i){
        //You can add the values to array here
        userInfo["'" + $th.eq(i).text().trim() + "'"] = $(this).text().trim();
    });
    //You might want to delete the old data in the array(if exists) before you add the new one 
    array.push(userInfo); 
});

获取表中已检查项目的所有相关值

4 个答案: