[英]How to clone typing to every input from the first box with jquery on checkbox checked (dynamically)?
Referring to the solution of https://stackoverflow.com/a/46159513/1620626 with a big help from @osdavison. 在@osdavison的大力帮助下,参考https://stackoverflow.com/a/46159513/1620626的解决方案。
Now I want the script to find it's child class
or id
without predefined it. 现在,我希望脚本在没有预定义的情况下找到它的子
class
或id
。 All I thinking now is making a function
. 我现在想的只是发挥
function
。 So I'd hope to do this. 所以我希望做到这一点。
JS 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 的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 />
All I got from the console is Uncaught ReferenceError: cloneAllz is not defined
我从控制台获得的只是
Uncaught ReferenceError: cloneAllz is not defined
Firstly your fiddle is using jQuery 1.5.2 which is very outdated. 首先你的小提琴是使用jQuery 1.5.2,这是非常不合时宜的。 You should update that ASAP.
您应该尽快更新。
Secondly you should use unobtrusive event handlers instead of event attributes in the HTML. 其次,您应该在HTML中使用不显眼的事件处理程序,而不是事件属性。
To fix your actual problem you can hook to the input
event of the first input
. 要解决您的实际问题,您可以挂钩到第一个
input
的input
事件。 Within that event handler you can inspect to see if the checkbox is checked, and if so se the val()
of all other inputs to match that of the current one. 在该事件处理程序中,您可以检查是否已选中该复选框,如果是,则检查所有其他输入的
val()
以匹配当前输入的val()
。 Using this method will massively simplify your code which currently seems a little over-complicated. 使用此方法将大大简化您的代码,目前看来有些复杂。 Try this:
尝试这个:
$('.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>
After a night I head ached. 一个晚上后,我头疼。 This noon I come up with the working code.
今天中午,我想出了工作代码。 Thanks to those efforts and google.
多亏了这些努力和Google。 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.