在复选框更改时，查找并选中另一个复选框并修改某些文本输入的值
On checkbox change, find and check another checkbox and modify the values of some text inputs
我创建了一个函数来检查其他复选框的变化。该功能有效，但控制台中显示错误，点击速度很慢。
问题来自 .change(); 。我在条件语句的末尾添加了这个，以便文本输入的值动态变化。
现在，如果我从 follwoing 中删除 .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>
how do you propose to get the same approach working? with minimum code
好吧，你让我开始思考如何去做，开始四处游玩，事情几乎没有失控呵呵。
所以最小代码部分现在不在游戏中:)。
还没有完全完成，因为我不明白主要目标是什么。但大部分都在工作。并且没有任何手动调用的 chnage 和 click 事件。全部基于数组和纯JS。
考虑到您的版本无法正常工作（循环问题），我将分享此内容，希望它有助于理解如何以其他方式实现此目的。
var group1 = [];
var group2 = [];
var group1Box = [];
var group2Box = [];
var itemvalue = [];
var itemvalue2 = [];
var itemBox = [];
//GROUP_CHECKBOX
document.querySelectorAll('input[type="checkbox"].group_checkbox').forEach(item => {
// GET ALL VALUES AND BOXES
if (item.classList.contains("group1") === true) {
group1.push(item.value);
group1Box.push(item.getAttribute('data-group'));
}
if (item.classList.contains("group2") === true) {
group2.push(item.value);
group2Box.push(item.getAttribute('data-group'));
}
// ADD EventListener TO ALL CHECKBOX
item.addEventListener('click', event => {
//IF GROUP1 CHECKBOX IS CHECKED
if (item.checked === true && item.classList.contains("group1") === true) {
itemvalue.push(item.value);
itemvalue2.push(document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].value);
itemBox.push(item.getAttribute('data-group'));
group1 = group1.filter(group1 => !itemvalue.includes(group1));
group2 = group2.filter(group2 => !itemvalue2.includes(group2));
group1Box = group1Box.filter(group1Box => !itemBox.includes(group1Box));
document.getElementById("lbu_multilistsvalue").value = itemvalue;
document.getElementById("lbu_currentvalue").value = group1;
document.getElementById("lbu_multiliststext").value = itemBox;
document.getElementById("lbu_currenttags").value = group1Box;
document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].checked = true;
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
//IF GROUP1 CHECKBOX IS UN-CHECKED
if (item.checked === false && item.classList.contains("group1") === true) {
group1.push(item.value);
itemvalue = itemvalue.filter(itemvalue => !item.value.includes(itemvalue))
group2.push(document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].value);
itemvalue2 = itemvalue2.filter(itemvalue2 => !document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].value.includes(itemvalue2))
group1Box.push(item.getAttribute('data-group'));
itemBox = itemBox.filter(itemBox => !item.getAttribute('data-group').includes(itemBox))
document.getElementById("lbu_multilistsvalue").value = itemvalue;
document.getElementById("lbu_currentvalue").value = group1;
document.getElementById("lbu_multiliststext").value = itemBox;
document.getElementById("lbu_currenttags").value = group1Box;
document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].checked = false;
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
//IF GROUP2 CHECKBOX IS CHECKED
if (item.checked === true && item.classList.contains("group2") === true) {
itemvalue2.push(item.value);
itemBox.push(item.getAttribute('data-group'));
group2 = group2.filter(group2 => !itemvalue2.includes(group2));
group1Box = group1Box.filter(group1Box => !itemBox.includes(group1Box));
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
//IF GROUP2 CHECKBOX IS UN-CHECKED
if (item.checked === false && item.classList.contains("group2") === true) {
group2.push(item.value);
itemvalue2 = itemvalue2.filter(itemvalue2 => !item.value.includes(itemvalue2))
group1Box.push(item.getAttribute('data-group'));
itemBox = itemBox.filter(itemBox => !item.getAttribute('data-group').includes(itemBox))
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
})
})
//GROUP_CHECKBOX_ALL
document.querySelectorAll('input[type="checkbox"].group_checkbox_all').forEach(item => {
item.addEventListener('click', event => {
if (item.checked === true && item.classList.contains("group1all") === true) {
document.querySelectorAll('input[type="checkbox"].group_checkbox').forEach(item2 => {
item2.checked = true;
})
document.getElementById("lbu_multilistsvalue").value = itemvalue;
document.getElementById("lbu_currentvalue").value = group1;
document.getElementById("lbu_multiliststext").value = itemBox;
document.getElementById("lbu_currenttags").value = group1Box;
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
if (item.checked === false && item.classList.contains("group1all") === true) {
document.querySelectorAll('input[type="checkbox"].group_checkbox').forEach(item2 => {
item2.checked = false;
})
document.getElementById("lbu_multilistsvalue").value = "";
document.getElementById("lbu_currentvalue").value = "";
document.getElementById("lbu_multiliststext").value = "";
document.getElementById("lbu_currenttags").value = "";
document.getElementById("lbu_multilistsvalue1").value = "";
document.getElementById("lbu_currentvalue1").value = "";
document.getElementById("lbu_multiliststext1").value = "";
document.getElementById("lbu_currenttags1").value = "";
}
if (item.checked === true && item.classList.contains("group2all") === true) {
document.querySelectorAll('input[type="checkbox"].group_checkbox.group2').forEach(item2 => {
item2.checked = true;
})
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
if (item.checked === false && item.classList.contains("group2all") === true) {
document.querySelectorAll('input[type="checkbox"].group_checkbox').forEach(item2 => {
item2.checked = false;
})
document.getElementById("lbu_multilistsvalue1").value = "";
document.getElementById("lbu_currentvalue1").value = "";
document.getElementById("lbu_multiliststext1").value = "";
document.getElementById("lbu_currenttags1").value = "";
}
})
})
<div class="multiple_checboxes_sets">
<div class="group_checboxes_set">
<div class="form-check">
<input class="group_checkbox_all group1all" 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 group1" 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 group1" 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 group1" 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 group1" 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 group1" 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 group2all" 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 group2" 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 group2" 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 group2" 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 group2" 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 group2" 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>
我创建了一个函数来检查其他复选框的变化。该功能有效，但控制台中显示错误，点击速度很慢。
问题来自 .change(); 。我在条件语句的末尾添加了这个，以便文本输入的值动态变化。
现在，如果我从 follwoing 中删除 .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>
how do you propose to get the same approach working? with minimum code
好吧，你让我开始思考如何去做，开始四处游玩，事情几乎没有失控呵呵。
所以最小代码部分现在不在游戏中:)。
还没有完全完成，因为我不明白主要目标是什么。但大部分都在工作。并且没有任何手动调用的 chnage 和 click 事件。全部基于数组和纯JS。
考虑到您的版本无法正常工作（循环问题），我将分享此内容，希望它有助于理解如何以其他方式实现此目的。
var group1 = [];
var group2 = [];
var group1Box = [];
var group2Box = [];
var itemvalue = [];
var itemvalue2 = [];
var itemBox = [];
//GROUP_CHECKBOX
document.querySelectorAll('input[type="checkbox"].group_checkbox').forEach(item => {
// GET ALL VALUES AND BOXES
if (item.classList.contains("group1") === true) {
group1.push(item.value);
group1Box.push(item.getAttribute('data-group'));
}
if (item.classList.contains("group2") === true) {
group2.push(item.value);
group2Box.push(item.getAttribute('data-group'));
}
// ADD EventListener TO ALL CHECKBOX
item.addEventListener('click', event => {
//IF GROUP1 CHECKBOX IS CHECKED
if (item.checked === true && item.classList.contains("group1") === true) {
itemvalue.push(item.value);
itemvalue2.push(document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].value);
itemBox.push(item.getAttribute('data-group'));
group1 = group1.filter(group1 => !itemvalue.includes(group1));
group2 = group2.filter(group2 => !itemvalue2.includes(group2));
group1Box = group1Box.filter(group1Box => !itemBox.includes(group1Box));
document.getElementById("lbu_multilistsvalue").value = itemvalue;
document.getElementById("lbu_currentvalue").value = group1;
document.getElementById("lbu_multiliststext").value = itemBox;
document.getElementById("lbu_currenttags").value = group1Box;
document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].checked = true;
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
//IF GROUP1 CHECKBOX IS UN-CHECKED
if (item.checked === false && item.classList.contains("group1") === true) {
group1.push(item.value);
itemvalue = itemvalue.filter(itemvalue => !item.value.includes(itemvalue))
group2.push(document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].value);
itemvalue2 = itemvalue2.filter(itemvalue2 => !document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].value.includes(itemvalue2))
group1Box.push(item.getAttribute('data-group'));
itemBox = itemBox.filter(itemBox => !item.getAttribute('data-group').includes(itemBox))
document.getElementById("lbu_multilistsvalue").value = itemvalue;
document.getElementById("lbu_currentvalue").value = group1;
document.getElementById("lbu_multiliststext").value = itemBox;
document.getElementById("lbu_currenttags").value = group1Box;
document.querySelectorAll('input[type="checkbox"][data-group="' + item.getAttribute('data-group') + '"]')[1].checked = false;
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
//IF GROUP2 CHECKBOX IS CHECKED
if (item.checked === true && item.classList.contains("group2") === true) {
itemvalue2.push(item.value);
itemBox.push(item.getAttribute('data-group'));
group2 = group2.filter(group2 => !itemvalue2.includes(group2));
group1Box = group1Box.filter(group1Box => !itemBox.includes(group1Box));
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
//IF GROUP2 CHECKBOX IS UN-CHECKED
if (item.checked === false && item.classList.contains("group2") === true) {
group2.push(item.value);
itemvalue2 = itemvalue2.filter(itemvalue2 => !item.value.includes(itemvalue2))
group1Box.push(item.getAttribute('data-group'));
itemBox = itemBox.filter(itemBox => !item.getAttribute('data-group').includes(itemBox))
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
})
})
//GROUP_CHECKBOX_ALL
document.querySelectorAll('input[type="checkbox"].group_checkbox_all').forEach(item => {
item.addEventListener('click', event => {
if (item.checked === true && item.classList.contains("group1all") === true) {
document.querySelectorAll('input[type="checkbox"].group_checkbox').forEach(item2 => {
item2.checked = true;
})
document.getElementById("lbu_multilistsvalue").value = itemvalue;
document.getElementById("lbu_currentvalue").value = group1;
document.getElementById("lbu_multiliststext").value = itemBox;
document.getElementById("lbu_currenttags").value = group1Box;
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
if (item.checked === false && item.classList.contains("group1all") === true) {
document.querySelectorAll('input[type="checkbox"].group_checkbox').forEach(item2 => {
item2.checked = false;
})
document.getElementById("lbu_multilistsvalue").value = "";
document.getElementById("lbu_currentvalue").value = "";
document.getElementById("lbu_multiliststext").value = "";
document.getElementById("lbu_currenttags").value = "";
document.getElementById("lbu_multilistsvalue1").value = "";
document.getElementById("lbu_currentvalue1").value = "";
document.getElementById("lbu_multiliststext1").value = "";
document.getElementById("lbu_currenttags1").value = "";
}
if (item.checked === true && item.classList.contains("group2all") === true) {
document.querySelectorAll('input[type="checkbox"].group_checkbox.group2').forEach(item2 => {
item2.checked = true;
})
document.getElementById("lbu_multilistsvalue1").value = itemvalue2;
document.getElementById("lbu_currentvalue1").value = group2;
document.getElementById("lbu_multiliststext1").value = itemBox;
document.getElementById("lbu_currenttags1").value = group1Box;
}
if (item.checked === false && item.classList.contains("group2all") === true) {
document.querySelectorAll('input[type="checkbox"].group_checkbox').forEach(item2 => {
item2.checked = false;
})
document.getElementById("lbu_multilistsvalue1").value = "";
document.getElementById("lbu_currentvalue1").value = "";
document.getElementById("lbu_multiliststext1").value = "";
document.getElementById("lbu_currenttags1").value = "";
}
})
})
<div class="multiple_checboxes_sets">
<div class="group_checboxes_set">
<div class="form-check">
<input class="group_checkbox_all group1all" 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 group1" 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 group1" 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 group1" 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 group1" 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 group1" 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 group2all" 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 group2" 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 group2" 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 group2" 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 group2" 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 group2" 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>