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

在@osdavison的大力帮助下，参考的解决方案

现在，我想让脚本找到它的子

类

或

id

，而不预先定义它。我现在想的就是做一个

函数

。所以我希望这样做

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

1。
克隆所有

2。

3。

4。

5。

。

。

。

100。

我从控制台得到的只是

uncaughtreferenceerror:cloneAllz没有定义

---

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

其次，应该在HTML中使用不引人注目的事件处理程序，而不是事件属性

要解决实际问题，您可以挂接到第一个

输入的
事件。在该事件处理程序中，您可以检查复选框是否已选中，如果已选中，请将所有其他输入的
val（）
与当前输入的
val（）匹配。使用此方法将极大地简化您的代码，而您的代码目前似乎有点过于复杂。试试这个：


$（'.container.master'）。在（'input'，function（）上{
var$container=$（this）.closest（'.container'）；
如果（$container.find（'.cloneAll'）.is（':checked'））
$container.find（'input:not（.master）'）.val（this.value）；
});

1.
克隆所有


2. 

3. 

4. 

5. 

.
。
。
。

100



1.
克隆所有


2. 

3. 

4. 

5. 

.
。
。
。

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

其次，应该在HTML中使用不引人注目的事件处理程序，而不是事件属性

要解决实际问题，您可以挂接到第一个
输入的
事件。在该事件处理程序中，您可以检查复选框是否已选中，如果已选中，请将所有其他输入的
val（）
与当前输入的
val（）匹配。使用此方法将极大地简化您的代码，而您的代码目前似乎有点过于复杂。试试这个：


$（'.container.master'）。在（'input'，function（）上{
var$container=$（this）.closest（'.container'）；
如果（$container.find（'.cloneAll'）.is（':checked'））
$container.find（'input:not（.master）'）.val（this.value）；
});

1.
克隆所有


2. 

3. 

4. 

5. 

.
。
。
。

100



1.
克隆所有


2. 

3. 

4. 

5. 

.
。
。
。

100
过了一夜，我头痛。今天中午我想出了工作代码。多亏了这些努力和谷歌


$（文档）.on（'change'，$（'.clone'），函数（el）{
变量$this=$（el.target）；
var$clss=$（el.target）.attr（'value'）；//目标类名
var$master=$（'.prdEdt'）.find（'td.+$clss+'input[type=“text”]）.filter（':visible:first'）；
var$tdVal=$（'td.+$clss+'>input[type=“text”]”）；
如果（$this.is（':checked'））{
$（$tdVal）.attr（'readonly'，'true'）；//设置子只读
$master.attr（'readonly'，false）；//排除第一个输入
$master.on（'input'，function（）{
$（$tdVal）.val（$（this.val（））；
$tdVal.each（函数（）{
log（$（this.attr（'id'）+'/'+$（this.val（））；
//调用ajax
});
})
}否则{
console.log（'unchecked'）；
$（$tdVal）.removeAttr（'readonly'）；
}
});

身份证件
代码
标题
成本
00067
00068
过了一夜，我头痛。今天中午我想出了工作代码。多亏了这些努力和谷歌


$（文档）.on（'change'，$（'.clone'），函数（el）{
变量$this=$（el.target）；
var$clss=$（el.target）.attr（'value'）；//目标类名
var$master=$（'.prdEdt'）.find（'td.+$clss+'input[type=“text”]）.filter（':visible:first'）；
var$tdVal=$（'td.+$clss+'>input[type=“text”]”）；
如果（$this.is（':checked'））{
$（$tdVal）.attr（'readonly'，'true'）；//设置子只读
$master.attr（'readonly'，false）；//排除第一个输入
$master.on（'input'，function（）{
$（$tdVal）.val（$（this.val（））；
$tdVal.each（函数（）{
log（$（this.attr（'id'）+'/'+$（this.val（））；
//调用ajax
});
})
}否则{
console.log（'unchecked'）；
$（$tdVal）.removeAttr（'readonly'）；
}
});

身份证件
代码
标题
成本
00067
00068
如果这些输入超过1组怎么办？我在这里工作。共有10行数据。每行有4个输入。我想用一个复选框来更改整个列，并立即更改它们。这就是为什么我一直在寻找动态工作的方法。在这种情况下，将每组元素包装在一个包含元素中，例如
div
，并使用DOM遍历仅在存在另一个容器时影响当前集合中的元素。我只需创建另一组代码并重命名
.container2
以与一起使用？不，它们都应命名为
container
，因为代码在DOM层次结构中找到类
container
最接近的元素，并使用该元素。现在，我正在调整数据显示的方式。从纯输入堆栈到表中。我给每个
td
的类命名，例如
td class=“col1”
。我替换了脚本，比如
$（'.col1.master'）。在（'input'，function（）{
）上。但是它不工作，我