根据选中的复选框获取 <td> 的值答案

【问题标题】：Getting value of <td> according to checked checkbox根据选中的复选框获取 <td> 的值
【发布时间】：2016-05-01 23:53:10
【问题描述】：

我需要根据选中的复选框获取值...使用 HTML 和 jQuery 或 Javascript 我尝试了以下代码：

jQuery 代码：

<script type="text/javascript">
$(function () {
    $('input:not(#submit)').click(function () {
        t = $(this).attr('id');

        text = $('.time' + t).text();
        //alert(text);
    });

    $('#submit').click(function (e) {
        e.preventDefault();
        var trs = $('table tr');
        var values = trs.first().find('td');

        var values1 = $('table tr td :checkbox:checked').map(function () {
            return $(this).closest('tr').find('td').text() + "==>"
            + values.eq($(this).parent().index()).text();
        }).get();

        alert(values1);

    });    
});
</script>

HTML 标记：

<body>
<table border="1">
<tr>
        <td>No</td>
        <td >Name</td>
        <td >City</td>
        <td >Check</td>

    </tr>
    <tr>
        <td>1</td>
        <td>
            select</td>
            <td>
            select</td>
        <td>
            <input type="checkbox" name="checkbox" class="r1" />select</td>  
    </tr>
    <tr>
        <td>2</td>
        <td>
            select</td>
            <td>
            select</td>
        <td>
            <input type="checkbox" name="checkbox" class="r1" />select</td>

    </tr>
    <tr>
        <td>3</td>
        <td>
            select</td>
            <td>
            select</td>
        <td>
            <input type="checkbox" name="checkbox" class="r1" />select</td>

    </tr>
    <tr>
        <td>4</td>
        <td>
            select</td>
            <td>
            select</td>
        <td>
            <input type="checkbox" name="checkbox" class="r1" />select</td>

    </tr>
</table>
<input type="submit" name="submit" id="submit" value="Save time sheet" />

</body>

我需要获取选中复选框的任何行的<td> 的值，如果选中多个复选框，我也需要多个值...

【问题讨论】：

那么问题是什么？您是否收到特定错误？目前听起来您希望我们为您编写您需要的代码，而不是帮助解决特定问题。
@turnerj：点击按钮时不会出现任何错误，它不打印任何内容或不返回任何内容。
@AnkitChhatbar 似乎你没有在这个脚本之前加载 jQuery 库。
yr 代码运行良好....不知道为什么它没有显示任何内容jsfiddle.net/0512j875

标签： javascript jquery html checkbox

【解决方案1】：

这是给我想要的输出的代码...我将其发布在这里以寻求其他人的帮助：

 <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>

    <script type="text/javascript">
    $(function () {
        $('input:not(#submit)').click(function () {
            t = $(this).attr('class');


            text = $('.time' + t).text();
            //alert(text);
        });


        $('#submit').click(function (e) {
            e.preventDefault();
            var trs = $('table tr');
            var values = trs.first().find('td');

            var values1 = $('table tr td :checkbox:checked').map(function () {
                return $(this).closest('tr').find('td:first').text()

            }).get();

            alert(values1);

            jQuery.ajax({
                type: 'post',                    
                url:'ddd.php',            
                data:{"values1" : values1},
                dataType:'json',    
                success:success            
            });  

        });

    });
    </script>

【讨论】：

【解决方案2】：

你可以改成这样：

var values1 = $('table tr td :checkbox:checked').map(function () {
                 var $this = $(this);
                 $this.closest('tr').find('td').each(function(){
                    return $(this).text()  + "==>" + 
                           values.eq($this.parent().index()).text();
                 });
              }).get();

【讨论】：

【解决方案3】：

您可以通过以下方式一次获取所有文本：

$(this).parent().parent().first().text();

工作代码片段：

$(function () {
  
  $('.r1').click(function(){
    var allData = $(this).parent().parent().first().text();
    alert(allData);
  });
  
  $('input:not(#submit)').click(function () {
    t = $(this).attr('id');

    text = $('.time' + t).text();
    //alert(text);
  });

  $('#submit').click(function (e) {
    e.preventDefault();
    var trs = $('table tr');
    var values = trs.first().find('td');

    var values1 = $('table tr td :checkbox:checked').map(function () {
      return $(this).closest('tr').find('td').text() + "==>"
      + values.eq($(this).parent().index()).text();
    }).get();

    alert(values1);

  });    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>No</td>
    <td >Name</td>
    <td >City</td>
    <td >Check</td>
  </tr>
  <tr>
    <td>1</td>
    <td>
      select</td>
    <td>
      select</td>
    <td>
      <input type="checkbox" name="checkbox" class="r1" />select</td>  
  </tr>
  <tr>
    <td>2</td>
    <td>
      a</td>
    <td>
      b</td>
    <td>
      <input type="checkbox" name="checkbox" class="r1" />select</td>
  </tr>
  <tr>
    <td>3</td>
    <td>
      select</td>
    <td>
      select</td>
    <td>
      <input type="checkbox" name="checkbox" class="r1" />select</td>
  </tr>
  <tr>
    <td>4</td>
    <td>
      select</td>
    <td>
      select</td>
    <td>
      <input type="checkbox" name="checkbox" class="r1" />select</td>
  </tr>
</table>
<input type="submit" name="submit" id="submit" value="Save time sheet" />

【讨论】：

找到解决方案...谢谢大家...为您的努力:)

【解决方案4】：

$(document).ready(function () {
    var a = "";
    $("input:checkbox").click(function () {
        if ((this).checked) {
            if (a.length == 0) {
                a = $(this).closest("tr").find("td:first").text();
            } else {
                a = a + "," + $(this).closest("tr").find("td:first").text();
            }
        } else {
            if (a.length == 1) {
                a = a.slice(0, -1);
            } else {
                a = a.replace(("," + $(this).closest("tr").find("td:first").text()), "");
            }
        }

    });

    $('#submit').click(function (e) {
        e.preventDefault();
        alert(a);
    });
});

Sample Fiddle

【讨论】：

【解决方案5】：

使用此代码。您在变量v 中选择的每一行值。

$('#submit').click(function (e) {
     e.preventDefault();
     var trs = $('table tr');
     //alert(trs);
     var values = trs.first().find('td');

     $('table tr td :checkbox:checked').map(function () {
       var $this = $(this);
       $this.closest('tr').each(function(){
          var v = $(this).find("td").text();
          alert(v);
       });
    });
});

【讨论】：