Check radio button or checkboxes with $.var?

[dueringa]

Hi,

it seems like it's not possible to check checkboxes or radio buttons with DisplayJS based on a variable, like in the following example:
https://jsfiddle.net/jgb0qc38/

Is there another way to do this?
This might be related to #37 - the checked attribute, I guess.

[arguiot]

There is definitely a way to this, but not with DisplayJS currently. Here is a little plugin that you can use to render radio checkboxes:

$.fn.radioRender = function(push) {
	// the function
	const var_push = () => {
		this.if();
		this.else();
		const elements = document.querySelectorAll("[var]");
		for (let i = 0; i < elements.length; i++) {
			const attr = elements[i].getAttribute("var");

			if (!attr.includes(".")) {
				if (elements[i].type == "radio") {
					elements[i].checked = this.obj[attr]
				} else {
					elements[i].innerHTML = this.obj[attr];
				}
			} else {
				const parts = attr.split(".");
				let val = this.obj[parts[0]];

				for (let p = 1; p < parts.length; p++) {
					val = val[parts[p]];
				}

				if (elements[i].type == "radio") {
					elements[i].checked = val
				} else {
					elements[i].innerHTML = val
				}
			}
		}
	};
	// push var cheking
	if (!push) {
		var_push();
	} else if (push == true) {
		var_push();
		this.live(this.obj, () => {
			var_push();
		});
	} else {
		window.setInterval(() => {
			var_push();
		}, push);
	}
}

I'm not closing this issue as I definitely need to upgrade the $.var() function. As I'm a bit busy and not really working on DisplayJS lately, submitting a PR would help a lot. Thank you very much for telling me about this issue.