如何在选中复选框（动态）的情况下从第一个框中克隆输入到每个输入？

Question

参考https://stackoverflow.com/a/46159513/1620626的解决方案，得到@osdavison的大力帮助。

现在我希望脚本在没有预定义的情况下找到它的子 class 或 id。我现在只想做一个function。所以我希望这样做。

JS

function cloneAllz(chkBoxID, clsName) {
  alert(chkBoxID + '/' + clsName);//test value
  var $input1 = $(document).find('#' + clsName).filter(':visible:first'); //find the first input begins with *box or other same id???
  $input1.keypress(function() { //duplicate the first box typing
    var $this = $(this);
    window.setTimeout(function() { //delay a bit
      if ($('#' + chkBoxID).is(':checked')) { //if checkbox empty
        $('*[id^="' + clsName + '"]').val($this.val()).attr('readonly', true); //clone all inputs and set them readonly
        $input1.attr('readonly', false);
      }
    }, 0);
  });
}

HTML

 1.
<input type="text" value="" id="box1" />
<label>
  <input type="checkbox" id="cloneAll" onChange="cloneAllz('cloneAll','box')" />clone all</label>
<br /> 2.
<input type="text" value="" id="box2" />
<br /> 3.
<input type="text" value="" id="box3" />
<br /> 4.
<input type="text" value="" id="box4" />
<br /> 5.
<input type="text" value="" id="box5" />
<br /> .
<br /> .
<br /> .
<br /> 100.
<input type="text" value="" id="box100" />
<br />

我从控制台得到的只是Uncaught ReferenceError: cloneAllz is not defined

Fiddle here

Answer 1

首先，您的小提琴使用的是 非常 过时的 jQuery 1.5.2。您应该尽快更新。

其次，您应该使用不显眼的事件处理程序而不是 HTML 中的事件属性。

要解决您的实际问题，您可以挂钩到第一个 input 的 input 事件。在该事件处理程序中，您可以检查复选框是否被选中，如果是，则将所有其他输入的val() 与当前输入匹配。使用这种方法将大大简化您目前看起来有点过于复杂的代码。试试这个：

$('.container .master').on('input', function() {
  var $container = $(this).closest('.container');
  if ($container.find('.cloneAll').is(':checked'))
    $container.find('input:not(.master)').val(this.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  1. <input type="text" value="" class="master" />
  <label>
    <input type="checkbox" class="cloneAll" />
    clone all
  </label><br /> 

  2. <input type="text" value="" id="box2" /><br /> 
  3. <input type="text" value="" id="box3" /><br /> 
  4. <input type="text" value="" id="box4" /><br /> 
  5. <input type="text" value="" id="box5" /><br /> 
  .<br /> .<br /> .<br /> 
  100. <input type="text" value="" id="box100" />
</div><br /><br />

<div class="container">
  1. <input type="text" value="" class="master" />
  <label>
    <input type="checkbox" class="cloneAll" />
    clone all
  </label><br /> 

  2. <input type="text" value="" id="box2" /><br /> 
  3. <input type="text" value="" id="box3" /><br /> 
  4. <input type="text" value="" id="box4" /><br /> 
  5. <input type="text" value="" id="box5" /><br /> 
  .<br /> .<br /> .<br /> 
  100. <input type="text" value="" id="box100" />
</div>

Answer 2

过了一夜，我头疼。今天中午我想出了工作代码。感谢这些努力和谷歌。 Fiddle

$(document).on('change', $('.clone'), function(el) {
  var $this = $(el.target);
  var $clss = $(el.target).attr('value'); //target class name
  var $master = $('.prdEdt').find('td.' + $clss + ' input[type="text"]').filter(':visible:first');
  var $tdVal = $('td.' + $clss + '>input[type="text"]');

  if ($this.is(':checked')) {
    $($tdVal).attr('readonly', 'true'); //set child readonly
    $master.attr('readonly', false); //exclude 1st input

    $master.on('input', function() {
      $($tdVal).val($(this).val());
      $tdVal.each(function() {
        console.log($(this).attr('id') + '/' + $(this).val());
        //call ajax
      });
    })
  } else {
    console.log('unchecked');
    $($tdVal).removeAttr('readonly');
  }
});

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered table-striped prdEdt">
  <tr>
    <th>ID</th>
    <th>Code
      <label class="pull-right label label-default">
        <input type="checkbox" class="clone" value='cde' /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Title
      <label class="pull-right label label-default">
        <input type="checkbox" class="clone" value="tt_en"  /> <em class="fa fa-clone"></em></label>
    </th>
    <th>Cost</th>
  </tr>
  <tr>
    <td>00067</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|67" class="form-control" value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|67" class="form-control" value="TRANSFER" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|67" class="form-control" value="800" />
    </td>
  </tr>
  <tr>
    <td>00068</td>
    <td class="cde">
      <input type="text" name="prd_cde" id="prd_cde|68" class="form-control " value="3000009" />
    </td>
    <td class="tt_en">
      <input type="text" name="prd_title_en" id="prd_title_en|68" class="form-control " value="TRANSFER" />
    </td>
    <td>
      <input type="number" name="prd_cost" id="prd_cost|68" class="form-control" value="600" />
    </td>
  </tr>
</table>