当jQuery中的复选框未选中时，如何清除文本框的值？

Question

我有一个数据表（使用jQuery创建），其第一列包含复选框，最后一列包含文本框。由于textbox和checkbox是动态创建的，因此它们具有相同的ID和名称，如下所示：

   $('#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

不能有多个elements在document具有相同id的价值。

使用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>