I have created a function that checks other checkboxes on change. the function works but there is an error showing in console and the performance of the click is slow.
the issue comes from the .change(); . I have added this at the end in conditional statement, so that the values of the text inputs change dynamically.
Now if i remove the .change(); from follwoing, it works ok but then the values of the text inputs won't 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();
}
the whole code 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
Well you got me thinking how to, started playing around and things got little out of hand hehe.
So minimum code part is out of the game for now :) .
Not quite finished as I don't understand what was the main goal. But most of it is working. And no chnage and click events what soever invoked manually. Its all based on arrays and pure JS.
And given your version is not working properly (looping problem) I will share this, hope it helps in understadning how to achive this in other way.
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>