复选框不会在该行中检索值

时间:2018-07-19 10:33:51

标签: javascript jquery html

在我的表中,我有多行,并且所有行都有一个复选框,我试图在已选中该复选框的行上检索VORD5值:

$(document).ready(function() {
  $('input[name=review]').change(function() {
    if ($('input[name=review]').is(':checked')) {
      var row = $(this).closest("tr");
      var ordNum = row.find(".VORD5a").text();

      console.log(ordNum);

      jQuery.ajax({
        url: 'B2BORD060.PGM',
        type: 'POST',
        data: {
          task: 'saveReview',
          VORD5a: ordNum.val(),
          Checked: 'Yes'
        },
      })

    } else {
      alert('Not checked');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr class="altcol1">
    <input type="hidden" name="VORD5a" value="02704953" />
    <input type="hidden" name="VLINE5a" value="0001" />
    <td class="text" class="VORD5">2704953</td>
    <td class="text num">1</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>
  </tr>
</table>

在上面的jquery中,我试图在ordNum var中检索VORD5值,当前正在检索一个空白值,有什么想法吗?谢谢

4 个答案:

答案 0 :(得分:1)

在Javascript中,您尝试在字符串对象上找到val()。 “ ordNum”不是字符串对象。使用以下代码。

$(document).ready(function() {
  $('input[name=review]').change(function() {
    if ($('input[name=review]').is(':checked')) {


      var row = $(this).closest("tr");
      var ordNum = row.find("input[name='VORD5a']").val();
      alert(ordNum);
      jQuery.ajax({
        url: 'B2BORD060.PGM',
        type: 'POST',
        data: {
          task: 'saveReview',
          VORD5a: ordNum,
          Checked: 'Yes'
        },
      })

    } else {
      alert('Not checked');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />
<table border="1">
  <tr class="altcol1">
    <input type="hidden" name="VORD5a" value="02704953" />
    <input type="hidden" name="VLINE5a" value="0001" />
    <td class="text" class="VORD5">2704953</td>
    <td class="text num">1</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>

  </tr>
</table>

答案 1 :(得分:1)

主要问题来自以下行中的选择器:

var ordNum = row.find(".VORD5a").text();

当文档中没有类.VORD5a时,您尝试使用类属性VORD5a进行选择。

您需要使用name属性作为选择器,例如:

var ordNum = row.find("input[name='VORD5a']");

注意::您还需要删除.text(),否则您将在ordNum中存储一个空字符串,因为输入没有文本,那么您将无法使用在您输入以下内容时,在字符串上.val()

VORD5a: ordNum.val(),

$(document).ready(function() {
  $('input[name=review]').change(function() {
    if ($(this).is(':checked')) {

      var row = $(this).closest("tr");
      var ordNum = row.find("input[name='VORD5a']");

      console.log(ordNum.val());

      jQuery.ajax({
        url: 'B2BORD060.PGM',
        type: 'POST',
        data: {
          task: 'saveReview',
          VORD5a: ordNum.val(),
          Checked: 'Yes'
        },
      })

    } else {
      alert('Not checked');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr class="altcol1">
    <input type="hidden" name="VORD5a" value="27049511" />
    <input type="hidden" name="VLINE5a" value="0001" />
    <td class="text" class="VORD5">27049511</td>
    <td class="text num">1</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>
  </tr>

  <tr class="altcol2">
    <input type="hidden" name="VORD5a" value="27049522" />
    <input type="hidden" name="VLINE5a" value="0002" />
    <td class="text" class="VORD5">27049522</td>
    <td class="text num">2</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>
  </tr>

  <tr class="altcol3">
    <input type="hidden" name="VORD5a" value="27049533" />
    <input type="hidden" name="VLINE5a" value="0003" />
    <td class="text" class="VORD5">27049533</td>
    <td class="text num">3</td>
    <td class="text num">20180417</td>
    <td class="text num">52411</td>
    <td class="text"> <input type="checkbox" name="review" value="yes" /></td>
  </tr>
</table>

答案 2 :(得分:1)

我希望这能使编码愉快:)检查注释行

$(document).ready(function() {  
$('input[name=review]').change(function(){
if($('input[name=review]').is(':checked')){


    var row = $(this).closest("tr"); 
//var ordNum = row.find(".VORD5a").text();
var ordNum  = row.find("input[name='VORD5a']").val()
    console.log(ordNum);
    jQuery.ajax(
        {
            url: 'B2BORD060.PGM', 
            type: 'POST',
            data: {task: 'saveReview', VORD5a: ordNum , Checked: 'Yes' },             
        })

} else {
    alert('Not checked');
}
});
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
     <tr class="altcol1"> 
  <input type="hidden" name="VORD5a" value="02704953" />
  <input type="hidden" name="VLINE5a" value="0001"/>
  <td class="text" class="VORD5">2704953</td>
  <td class="text num">1</td>
  <td class="text num">20180417</td>
  <td class="text num">52411</td>
  <td class="text"> <input type="checkbox" name="review" value="yes" /></td>

</tr>
</table>

答案 3 :(得分:0)

如果您想基于名称value获得attribute的输入,则可以这样使用:-

<input type="hidden" name="VORD5a" value="02704953" />
var ordNum = row.find('input[name="VORD5a"]');
ordNum.val();