如何在文本框中獲取選定的復選框行序列號值

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