如果在jquery中单击该行中的复选框,如何获取行的值

时间:2014-10-28 06:47:27

标签: jquery ajax checkbox

如果选中同一行复选框,我想获得整行的值。例如

 <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。请帮我 。提前致谢

2 个答案:

答案 0 :(得分:5)

尝试

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

答案 1 :(得分:0)

您可以选中复选框并使用.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