如何在文本框中获取选定的复选框行序列号值

Question

我有一张表，显示账单明细。 单击复选框时，该值将相加。 沿此，我需要获取要检查的帐单ID号，并将其显示在由逗号分隔的输入字段中

 var sum = 0; $('body').on('click', '.due-fee', function() { var status = ''; if ($(this).is(':checked')) { sum += parseInt($(this).val()); status = 'Paid'; } else { sum -= parseInt($(this).val()); status = 'Not paid'; } $(this).parents('tr').eq(0).find('td:eq(2)').text(status); $('#msg').text(sum); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name=form1 action="GET"> <table class='table table-striped' > <tr > <th >Bill id</th><th >FEES name</th><th >status</th></tr> <tr ><td>1</td><td ><input type=checkbox name=ckb class="due-fee" value=100;> fee = 100 </td><td>Not Paid</td></tr> <tr><td>2</td><td ><input type=checkbox name=ckb class="due-fee" value=200 ;> fee = 200 </td><td>Not Paid</td></tr> <tr ><td>3</td><td ><input type=checkbox name=ckb class="due-fee" value=300;> fee = 300 </td><td>Not Paid</td></tr> <tr ><td>4</td><td ><input type=checkbox name=ckb class="due-fee" value=400 ;> fee = 400 </td><td>Not Paid</td></tr> </table> <input type="text" name="bill_id" id="bill_id"> <input type="submit" > </form> <br> <div id=msg></div> 

例如

我选择2和4

预期输出：选定的帐单ID = 2,4 sum = 600

Answer 1

在包含js库之前，您已经编写了脚本代码，因此这不起作用。 请尝试执行此操作，因为它将解决在输入框中显示总金额的问题，并且当您提交表单时，它将根据需要在查询字符串中包含所有值。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var sum = 0;
     $(document).on('click', '.due-fee', function() {

     var status = '';
     var id_string = '';

      id =  $(this).parents('tr').eq(0).find('td:eq(0)').text();
 if ($(this).is(':checked')) {
  sum += parseInt($(this).val());
  if(id_string !=''){
      id_string = id_string +','+id;
  }
  else{
      id_string = id;
  }

  status = 'Paid';
  } else {
  sum -= parseInt($(this).val());
  status = 'Not paid';
  }     
  $(this).parents('tr').eq(0).find('td:eq(2)').text(status);     
  $('#msg').text(sum);
  $('#bill_id').val(id_string);
      });
</script>
<form name=form1 action="GET">
    <table class='table table-striped' >
    <tr > <th >id</th><th >FEES name</th><th >status</th></tr>
    <tr ><td>1</td><td ><input type=checkbox name=ckb class="due-fee" value=100;> fee = 100 </td><td>Not Paid</td></tr>
    <tr><td>2</td><td ><input type=checkbox name=ckb class="due-fee" value=200 ;> fee = 200 </td><td>Not Paid</td></tr>
    <tr  ><td>3</td><td ><input type=checkbox name=ckb class="due-fee" value=300;> fee = 300 </td><td>Not Paid</td></tr>
    <tr ><td>4</td><td ><input type=checkbox name=ckb class="due-fee" value=400 ;> fee = 400 </td><td>Not Paid</td></tr>

    </table>
    <input type="text" name="bill_id" id="bill_id" value="">
    <input type="submit" >
    </form>

    <br>

    <div id=msg></div>

Answer 2

与其click正文，不如将change事件添加到类型为checkbox input 。 对于id，您可以使用$(this).parent().prev().text()获得选中的输入的关联ID。 创建一个id数组，并在提交时加入id数组，以获取逗号分隔的值。

 let sum = 0; let ids = []; const textInput = $('input[type="text"]'); $('input:checkbox').on('change', function() { const isChecked = $(this)[0].checked; const val = parseInt($(this).val()); const selectedId = parseInt($(this).parent().prev().text()); if(isChecked) { sum = sum + val; ids.push(selectedId); } else { sum = sum - val; const index = ids.findIndex((id) =>id == selectedId); ids.splice(index, 1); } console.log("sum", sum); console.log('Ids', ids); textInput.val(ids.join(',')); }); $('input:submit').on('click', function() { if(ids.length > 0) { console.log(ids.join(','))} }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class='table table-striped' > <tr> <th>id</th> <th>FEES name</th> <th>status</th> </tr> <tr> <td>1</td> <td><input type=checkbox name=ckb class="due-fee" value=100;> fee = 100 </td> <td>Not Paid</td> </tr> <tr> <td>2</td> <td><input type=checkbox name=ckb class="due-fee" value=200 ;> fee = 200 </td><td>Not Paid</td> </tr> <!-- <tr ><td>3</td><td ><input type=checkbox name=ckb class="due-fee" value=300;> fee = 300 </td><td>Not Paid</td></tr> --> <!-- <tr ><td>4</td><td ><input type=checkbox name=ckb class="due-fee" value=400 ;> fee = 400 </td><td>Not Paid</td></tr> --> </table> <input type="text" name="bill_id" id="bill_id"> <input type="submit">