Handle special binding case for 'checked' and 'selected'

[inxilpro]

I ran into an interesting issue with x-bind and the checked property today. Here's the Twitter thread summarizing the issue, and here's a codesandbox demo showing it in action.

Basically, the value, checked and selected properties are special in that they're not kept in sync with their corresponding attributes. That means that the following is perfectly legit javascript:

element.setAttribute('checked', 'checked');
element.checked = false;

This will result in a checkbox that is not checked, but has a checked attribute set (which, as far as I can tell, is visually checked but not "technically" checked).

Anyway, 90% of the time this won't come up because both x-bind:value and x-model have special bind logic for checkbox values that set the property rather than the attribute:

alpine/packages/alpinejs/src/utils/bind.js

Lines 54 to 58 in 6142a83

	if (Array.isArray(value)) {
	el.checked = value.some(val => checkedAttrLooseCompare(val, el.value))
	} else {
	el.checked = !!value
	}

There are some cases, though, where you want to handle both sides of the binding on your own (in our case, the checkboxes are driven from Algolia instant search state, so changing the checkbox triggers an event that then updates the state). This PR makes that case possible.

[calebporzio]

Thanks @inxilpro!