Question

我有一个数据表（使用jQuery创建），其第一列包含复选框，最后一列包含文本框。由于文本框和复选框是动态创建的，因此它们具有相同的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

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

使用name属性选择元素

＆＃13;

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

＆＃13;

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

＆＃13;

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/

如何在jquery中取消选中复选框时清除文本框值？

2 个答案: