【发布时间】：2020-07-26 16:04:19
【问题描述】：
我创建了一个函数来检查其他复选框的变化。该功能有效，但在控制台中显示错误并且点击的性能很慢。
问题来自.change(); 。我在条件语句的末尾添加了这个，以便文本输入的值动态变化。
现在如果我从下面删除 .change();，它可以正常工作，但文本输入的值不会改变。
if(this.checked) {
//Do stuff
$(this).closest('.multiple_checboxes_sets').find(".sms_groups [data-group='" + name + "']").prop( "checked", true ).change();
} else {
$(this).closest('.multiple_checboxes_sets').find(".sms_groups [data-group='" + name + "']").prop( "checked", false ).change();
}
整个代码JSFiddle
$(document).ready(function() {
$(".group_checkbox_all").change(function() {
if (this.checked) {
$(this).closest('.group_checboxes_set').find('.group_checkbox').prop("checked", true).change();
} else {
$(this).closest('.group_checboxes_set').find('.group_checkbox').prop("checked", false).change();
}
});
$(".group_checkbox").change(function() {
var val = $(this).val();
var name = $(this).data('group');
var checked = $(this).closest('.group_checboxes_set').find('.group_checkbox:checked').map(function() {
return $(this).val()
}).get();
var notchecked = $(this).closest('.group_checboxes_set').find('.group_checkbox:not(:checked)').map(function() {
return $(this).val()
}).get();
var checkedtext = $(this).closest('.group_checboxes_set').find('.group_checkbox:checked').map(function() {
return $(this).data('group')
}).get();
var notcheckedtext = $(this).closest('.group_checboxes_set').find('.group_checkbox:not(:checked)').map(function() {
return $(this).data('group')
}).get();
$(this).closest('.group_checboxes_set').find('.lbu_multilistsvalue').val(checked).change();
$(this).closest('.group_checboxes_set').find('.lbu_currentvalue').val(notchecked).change();
$(this).closest('.group_checboxes_set').find('.lbu_multiliststext').val(checkedtext).change();
$(this).closest('.group_checboxes_set').find('.lbu_currenttags').val(notcheckedtext).change();
if (this.checked) {
//Do stuff
$(this).closest('.multiple_checboxes_sets').find(".sms_groups [data-group='" + name + "']").prop("checked", true).change();
} else {
$(this).closest('.multiple_checboxes_sets').find(".sms_groups [data-group='" + name + "']").prop("checked", false).change();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="multiple_checboxes_sets">
<div class="group_checboxes_set">
<div class="form-check">
<input class="group_checkbox_all" data-group="All" id="all" type="checkbox" value="0000" />
<label class="form-check-label" for="all">All</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 1" id="1111" type="checkbox" value="1111" />
<label class="form-check-label" for="1111">Box 1</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 2" id="2222" type="checkbox" value="22222" />
<label class="form-check-label" for="2222">Box 2</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 3" id="3333" type="checkbox" value="3333" />
<label class="form-check-label" for="3333">Box 3</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 4" id="4444" type="checkbox" value="4444" />
<label class="form-check-label" for="4444">Box 4</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 5" id="55555" type="checkbox" value="5555" />
<label class="form-check-label" for="55555">Box 5</label>
</div>
<input type="text" class="form-control lbu_multilistsvalue" id="lbu_multilistsvalue" name="lbu_multilistsvalue">
<input type="text" class="form-control lbu_currentvalue" id="lbu_currentvalue" name="lbu_currentvalue">
<input type="text" class="form-control lbu_multiliststext" id="lbu_multiliststext" name="lbu_multiliststext">
<input type="text" class="form-control lbu_currenttags" id="lbu_currenttags" name="lbu_currenttags" value="">
</div>
<div class="group_checboxes_set sms_groups">
<div class="form-check">
<input class="group_checkbox_all" data-group="All" id="all1" type="checkbox" value="aaaa" />
<label class="form-check-label" for="all1">All</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 1" id="11112" type="checkbox" value="bbbb" />
<label class="form-check-label" for="11112">Box 1</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 2" id="22223" type="checkbox" value="cccc" />
<label class="form-check-label" for="22223">Box 2</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 3" id="33334" type="checkbox" value="dddd" />
<label class="form-check-label" for="33334">Box 3</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 4" id="44445" type="checkbox" value="eeee" />
<label class="form-check-label" for="44445">Box 4</label>
</div>
<div class="form-check">
<input class="group_checkbox" data-group="Box 5" id="555556" type="checkbox" value="ffff" />
<label class="form-check-label" for="555556">Box 5</label>
</div>
<input type="text" class="form-control lbu_multilistsvalue" id="lbu_multilistsvalue1" name="lbu_multilistsvalue">
<input type="text" class="form-control lbu_currentvalue" id="lbu_currentvalue1" name="lbu_currentvalue">
<input type="text" class="form-control lbu_multiliststext" id="lbu_multiliststext1" name="lbu_multiliststext">
<input type="text" class="form-control lbu_currenttags" id="lbu_currenttags1" name="lbu_currenttags" value="">
</div>
</div>【问题讨论】：
-
使用
.trigger( "change" );来解决错误。根据性能问题，我对所有这些触发器的发生一点也不感到惊讶。我有一种感觉，它可以做得更简单。就像添加/复制/删除周围的值一样。 -
@ikiK 我试过
.trigger( "change" );它也没有帮助。我相信应该有更好的方法来做到这一点，仍在尝试.. -
你的意思是它没有帮助？它为我消除了错误，我也试过了。
-
@ikiK 我在这里试过：jsfiddle.net/Nashza/L6as438r/4
-
SO sn-p 删除了错误，我只是在本地尝试过，我得到了
Uncaught InternalError: too much recursion。你需要改变你的逻辑。像我之前所说的许多事件。
标签： javascript jquery forms onchange