根据选中的复选框获取价值

时间:2014-12-30 06:21:54

标签: javascript jquery html checkbox

我需要根据选中的复选框获取价值...使用 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>值,如果选中了多个复选框,我还需要多个值...

5 个答案:

答案 0 :(得分:6)

这是给我我想要的输出的代码......我在这里发帖给别人帮忙:

 <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>

答案 1 :(得分:3)

您可以更改为:

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();

答案 2 :(得分:0)

您可以通过以下方式立即获取所有文字:

$(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" />

答案 3 :(得分:0)

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

答案 4 :(得分:0)

使用此代码。您在变量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);
       });
    });
});