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

预期输出：所选帐单编号= 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事件添加到input，类型为checkbox。对于ID，您可以使用$(this).parent().prev().text()获取选中的输入的关联ID。做一个 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">

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

2 个答案: