Alpine: Binding a value on checkboxes = checked by default

[richgcook]

Is there a reason why x-bind:value on checkboxes check themselves by default?

I think this may be a bug. See CodePen below as an example.

https://codepen.io/richardcool/pen/eYpyMWB

[jokarz]

You had the bind value for the checkbox set to be a truthy value (in your case it's license.title) that causes the checkbox to be checked

[richgcook]

It has nothing to do with alpinejs.
You had the bind value for the checkbox set to be a truthy value (in your case it's license.title) that causes the checkbox to be checked

But if I hardcode the value value="broadcast" then it works fine?

I'm going to passing the inputs to a POST request so need the values to be useful...

[muzafferdede]

Not really. It has something to do with Alpine. Alpine does bind checked depending on the value attribute. Probably for some use cases Caleb decided this approach. Not sure what is the real reason but, FYI.

The value attribute defines a value which is sent by a POST request (i.e. You have an HTML form submitted to a server). Now the server gets the name (if defined) and the value.

But Alpine converts this value to "checked" right here

Which uses !! bang bang to convert string to boolean and apply checked based on this value.

[jreviews]

Remove x-bind:value and instead set/unset the value of the checkbox using the @click event on the input

@click="$event.target.value = $event.target.checked ? license.title : ''"

[jokarz]

Sorry for that uneducated comment @richgcook, what @muzafferdede said was correct. Use @jreviews workaround for now

[HugoDF]

Remove x-bind:value and instead set/unset the value of the checkbox using the @click event on the input

@click="$event.target.value = $event.target.checked ? license.title : ''"

Nice workaround, not sure how we might go about fixing this use case without a breaking change 🤔

[jreviews]

If the "checked" attribute is the one that determines whether the input value is posted with the form, then setting the value via x-bind shouldn't affect the checked state. Instead it should be possible to use x-bind:checked to modify the default, and sub-sequent, checked states.

[SimoTod]

One for Caleb but I would classify it as a bug so fixable as part of a minor release.
I think the code works like that because it's used by x-model as well. We should probably do the same thing we use for radio buttons.

[HugoDF]

@richgcook or anyone else want to create a PR with a failing test for this case?

[jokarz]

@richgcook or anyone else want to create a PR with a failing test for this case?

Sure