Tile list and checkbox tiles

[DanMacLeod]

I'm using a Tile List with Checkbox Tile items. I want to treat the list like radio buttons so only one item in the list can be selected at a time. I have a couple of ideas but I need to know how to call the onclick event for an item programatically or how to change an items checkbox image from checked to not checked programmatically. Any ideas?

[Durus · Accepted solution]

I'm using the onclick of title it to change the color of the selected item; I'm just really giving the tile an id and using getElementById to get at the tile.

The line of code after the for loop setting the value to 0 fixes a bizarre problem where all the tiles are in the first row layered together.

My code is in github if you want an example https://github.com/grumpy-coders/pointy/blob/master/app/screens/select-player.js

But I'll just paste the piece that you care about:

		for (let playerIndex = 0; playerIndex < availablePlayers.length; playerIndex++) {
			if (availablePlayers[playerIndex] == null) {
				continue;
			}
			let cbTile = screen.getElementById('chk' + playerIndex);
			if (cbTile != null) {
				cbTile.text = availablePlayers[playerIndex].name;
				cbTile.playerID = availablePlayers[playerIndex].playerID;
				cbTile.style.display = 'inline';
				cbTile.getElementById('checkbox').getElementById('header').getElementById('text').style.fill = 'fb-yellow';
				cbTile.firstChild.value = 0;
				cbTile.firstChild.onclick = function () {
					cbTile.getElementById('checkbox').getElementById('header').getElementById('text').style.fill = cbTile.firstChild.value == 0 ? 'fb-green' : 'fb-yellow';
				}
			}
		}
		screen.getElementById('tile-list').value = 0;