Jquery获取所选复选框的表行值

时间:2013-09-02 04:30:41

标签: jquery

在以下示例中 http://jsfiddle.net/hU89p/200/

如何在onClick函数

上获取所选复选框的行值
          Select   Cell phone        Rating     Location
                   BlackBerry9650    2/5        UK
                   Samsung Galaxy    3.5/5      US
                   Droid X           4.5/5      REB
选择多个复选框时,在下表中

我必须提醒相应的行值。

function myfunc(ele) {

 var values = new Array();
       $.each($("input[name='case[]']:checked"), function() {
       values.push($(this).val());
       alert("val---"+values);

           )};
              }

例如:

选择前两个复选框时,我必须get BlackBerry9650, 2/5, UK, and Samsung Galaxy,3.5/5 ,US

怎么可能?

4 个答案:

答案 0 :(得分:9)

jsFiddle Demo

如果您希望用逗号和空格分隔它们,您可以自行推送每个单元格并使用JS Array .join()

var values = new Array();

$.each($("input[name='case[]']:checked").closest("td").siblings("td"),
       function () {
            values.push($(this).text());
       });

   alert("val---" + values.join(", "));

答案 1 :(得分:8)

$("input[name='case[]']").click(function(){
 var values = new Array();
       $.each($("input[name='case[]']:checked"), function() {
           var data = $(this).parents('tr:eq(0)');
           values.push({ 'callphone':$(data).find('td:eq(1)').text(), 'rating':$(data).find('td:eq(2)').text() , 'location':$(data).find('td:eq(3)').text()});             
       });

       console.log(values);
 });

示例:http://jsfiddle.net/hU89p/213/

自定义输出检查:

示例:http://jsfiddle.net/hU89p/215/

答案 2 :(得分:2)

尝试:

function myfunc(ele) {
 var values = new Array();
       $.each($("input[name='case[]']:checked").parents("td").siblings(), function() {
           values.push($(this).text());
           alert("val---"+values);
       });
}

DEMO FIDDLE

答案 3 :(得分:1)

我已经更新了你的小提琴,结果代码如下:
HTML:

<table border="1">
    <tr>
        <th>Select</th>
        <th>Cell phone</th>
        <th>Rating</th>
        <th>Location</th>
    </tr>
    <tr>
        <td align="center">
            <input type="checkbox" class="case" name="case" value="1" />
        </td>
        <td>BlackBerry Bold 9650</td>
        <td>2/5</td>
        <td>UK</td>
    </tr>
    <tr>
        <td align="center">
            <input type="checkbox" class="case" name="case" value="2" />
        </td>
        <td>Samsung Galaxy</td>
        <td>3.5/5</td>
        <td>US</td>
    </tr>
    <tr>
        <td align="center">
            <input type="checkbox" class="case" name="case" value="3" />
        </td>
        <td>Droid X</td>
        <td>4.5/5</td>
        <td>REB</td>
    </tr>
    </tr>
</table>

脚本:

$('[name=case]').click(function () {
    checkAll();
});

function checkAll() {
    $('[name=case]:checked').each(function () {
        alert('selected: ' + $(this).val());
    });
}