Как очистить значение текстового поля, когда флажок установлен в jquery?

Question

У меня есть один datatable (созданный с использованием jQuery), чей первый столбец содержит флажки, а последний столбец содержит текстовые поля. Так как текстовое поле и флажок создаются динамически, поэтому они имеют одинаковые идентификаторы и имена, как показано ниже:

$('#statement-table').dataTable({ 
      "data": json, 
      "dom": 't', 
      "columns": [ 
       {"data":""}, 
       {"data": "statementCode"}, 
       {"data": "dueDate"}, 
       {"data": "statementBalance"}, 
       {"data": ""} 

      ], 
      "columnDefs": [ 
       {className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4]}, 
       { 
        'targets': 0, 
        'orderable': false, 
         'render': function(data, type, full, meta) { 
           return '<input type="checkbox" name="payment-checkbox" id="select-checkbox"/>'; 
         } 
       }, 

        { 
        'targets': 4, 
        'render': function (data, type, full, meta){ 
         return 
         '<input type="number" id="payement-textbox" name="text[]" class="payment" value=""/>'; 
        } 
        } 

      ], 
      "aaSorting": [[2, 'desc']], 

     }); //End of datatable function 

Мое требование, чтобы очистить значение текстового поля, когда его соответствующий флажок получил бесконтрольно. Я написал следующий код jquery, но его не очищающий текст:

$("input[name=payment-checkbox]").click(function() { 
      $("table tr td input[type='checkbox']").each(function() { 
       var ischecked = $(this).is(":checked"); 
        if (!ischecked) { 
         $(this).parent().next().find("input[type='text']").val(""); 
        } 
        else 
        { 
         alert("do nothing"); 
        } 
       }); 
      }); 

Пожалуйста, помогите мне с этим.

Answer 1

There must not be multiple elements in a document that have the same id value.

Используйте name атрибут для выбора элемента

$('[type="checkbox"]').on('change', function() { 
 
    if (!this.checked) { 
 
    $('[type="text"][name="' + this.name + '"]').val(''); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<input type="text" name="name1" value="name1"> 
 
<input type="checkbox" name="name1" checked> 
 
<br> 
 
<input type="text" name="name2" value="name1"> 
 
<input type="checkbox" name="name2" checked>

Answer 2

U может проверить на изменения и найти первое текстовое поле

$('.test').change(function() { 

    var checkboxINstance = $(this); 
    if (!checkboxINstance.is(":checked")) 
    { 
     checkboxINstance.closest('tr').find("input[type=number]")[0].value= ''; 
    }  
}); 

см. Здесь скрипку https://jsfiddle.net/2b6e7v6t/1/