如果在jquery中單擊該行的複選框，如何獲取行的值

Question

如果選中了同一行復選框，我希望獲得整行的值。例如

<table id="tbl" border="1"> 
    <tr><input type="checkbox" id="selectall"/> 
     <td> 
     <input type="checkbox"/></td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
    </tr> 
    <tr><td><input type="checkbox"/></td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
    </tr> 
    <tr><td><input type="checkbox"/></td> 
<td>2</td> 
<td>3</td> 
<td>5</td> 
    </tr> 
</table> 
<input type="button" value="save"/> 

$('#selectall').click(function(event) { 
      if(this.checked) { 
       // Iterate each checkbox 
       $(':checkbox').each(function() { 
        this.checked = true; 
       }); 
      } 
      else { 
      $(':checkbox').each(function() { 
        this.checked = false; 
       }); 
      } 

     }); 

$("#save").click(function(){ 
    /If all selected value has to pass through ajax one by one row/ 
}); 

如果我按下保存按鈕，我必須選擇所有有效的行值。請參考fiddle。請幫幫我 。在此先感謝

Answer 1

嘗試

$('#selectall').click(function(event) { 
 
    $(':checkbox').prop('checked', this.checked); 
 
}); 
 

 
$("#save").click(function() { 
 
    //reset the logger 
 
    $('#log').empty(); 
 

 
    //get all the checked checboxex 
 
    $('#tbl input:checkbox:checked').each(function() { 
 
    //for each checked checkbox, iterate through its parent's siblings 
 
    var array = $(this).parent().siblings().map(function() { 
 
     return $(this).text().trim(); 
 
    }).get(); 
 
    //to print the value of array 
 
    $('#log').append(JSON.stringify(array)) 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" id="selectall" /> 
 
<table id="tbl" border="1"> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>4</td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <input type="checkbox" /> 
 
    </td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    <td>5</td> 
 
    </tr> 
 
</table> 
 
<input type="button" id="save" value="save" /> 
 
<div id="log"></div>

Answer 2

可以得到選中的複選框，並使用.closest()讓自己最親近的行元素對象：

$('input:checked').closest('tr'); 

如果你正在尋找前頁獲得相對於選中的複選框的TD元素，那麼你可以使用：

$('input:checked').parent().siblings(); //if checkbox 3 is checked then it will have 3rd rows other three td elements having text 2,3,5. 

更新：，讓他們在陣列

arr=[]; 
/If all selected value has to pass through ajax one by one row/ 
$('input:checked').parent().each(function(){ 
    arr.push($(this).siblings().map(function(){ 
    return $(this).text() 
    }).get()); 
}); 
console.log(arr); 

Working Demo