qml check/uncheck all checkboxes in listview - qt

Question

I have the following code to check/uncheck all other checkboxes in a listview. I am using the ButtonGroup component to achieve the same. It seems to achieve what it is intended to do but when I uncheck all of them and scroll through the listview, a few of the items on the top and bottom of the list are automatically checked again. What could be wrong?
import QtQuick 2.15
import QtQuick.Controls 2.15
Rectangle {
id: win
width: parent.width
height: parent.height
visible: true
ButtonGroup {
id: childGroup
exclusive: false
checkState: mainCheckBox.checkState
}
CheckBox {
id: mainCheckBox
checked: true
text: "All"
indicator.width: 15
indicator.height: 15
checkState: childGroup.checkState
}
ListView {
id: multiSelectCheckList
model: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40]
height: parent.height
width: parent.width
anchors {
top: mainCheckBox.bottom
margins: 10
}
delegate: CheckBox {
id: modelCheckBoxes
checked: true
text: modelData
indicator.width: 15
indicator.height: 15
ButtonGroup.group: childGroup
}
}
}

Answer 1

The problem is that the items in a ListView are dynamically created, that is, there is a cache. So in this case it is better to use a template to save the relevant information and then modify the template rather than the delegate.
import QtQuick 2.15
import QtQuick.Controls 2.15
Rectangle {
id: win
width: parent.width
height: parent.height
visible: true
ListModel{
id: listModel
dynamicRoles: true
Component.onCompleted: {
var numbers = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40]
for(var i in numbers){
var number = numbers[i]
listModel.append({"number": number, "checked": true})
}
}
}
CheckBox {
id: mainCheckBox
checked: true
text: "All"
indicator.width: 15
indicator.height: 15
onCheckStateChanged: {
for(var i =0; i < listModel.count; ++i){
listModel.setProperty(i, "checked", checked)
}
}
}
ListView {
id: multiSelectCheckList
model: listModel
height: parent.height
width: parent.width
anchors {
top: mainCheckBox.bottom
margins: 10
}
delegate: CheckBox {
id: modelCheckBoxes
checked: model.checked
text: model.number
indicator.width: 15
indicator.height: 15
}
}
}