Checkbox ignores value attribute when checked #4018

docdunning · 2024-02-06T20:16:47Z

docdunning
Feb 6, 2024

It seems that a checkbox ignores the HTML value attribute, and just sets the x-model variable to true or false.

Here's a page that demonstrates the issue. Note how when you tick/untick the first box, it changes to true, then false, rather than toggling between '1' and false (or null).

By comparison, the second two checkboxes (in an array) do use their value attributes.

This is inconsistent behaviour and it doesn't respect the usual way that HTML form fields are handled. What am I doing wrong - or do I just have to accept that this is how it's going to be?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
  <div x-data="check">
    <p>
      <input type="checkbox" value="1" x-model="tickbox">
      <span x-text="tickbox"></span>
    </p>
    <p>
      <input type="checkbox" value="1" x-model="tickarray">
      <input type="checkbox" value="2" x-model="tickarray">
      <span x-text="tickarray"></span>
    </p>
  </div>
<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('check',() => ({
    tickbox: 1,
    tickarray: [],
  }))
})
</script>
</body>
</html>

ekwoka · 2024-02-07T06:12:10Z

ekwoka
Feb 7, 2024

What is the use case for a singular checkbox with a value?

Wouldn't boolean be the correct type of the binding?

I think just changing the behavior wholesale may be a breaking change (even when only applied if value is present), but a modifier could be reasonable to opt in.

Though, I'm honestly struggling to see the use case for it...

You could just make the thing it's modeled to be an array...

0 replies

docdunning · 2024-02-07T09:56:42Z

docdunning
Feb 7, 2024
Author

@ekwoka

What is the use case for a singular checkbox with a value?

I'm converting a form used to edit/update a MySQL table. One of the columns is a TINYINT that has values 1 and 0, which signify 'published' or 'not published'. So yes ... you're right ... it is a Boolean, but MySQL stores it as a number.

When a record is retrieved (using a new API), it has 1 or 0 in that column, and I am trying to use that value to model the checkbox.

I think the answer will be to convert the 1/0 to true/false as soon as it's received at the front-end; model the checkbox on that value; and convert back when the form data is prepared for submission.

I'll see how it goes.

5 replies

ekwoka Feb 7, 2024

Might x-model.number do that?

docdunning Feb 7, 2024
Author

@ekwoka

I've tried x-model.number but no, it didn't work ;-(

What I have found, though, is that using x-model on a checkbox causes the checkbox's value attribute to change. I don't think that should happen. The value attribute on a checkbox should really be fixed - it's what gets sent to the server when the form is submitted. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value

I think x-model on a checkbox should

Sync the box's checked attribute with the modelled variable being trueish / falseish.
If the box is checked, set the modelled variable to the checkbox's value (if present), or true if no value is present
If the box is unchecked, set the modelled variable to false

This might not be possible for Alpine, so I can work around it by converting the 1/0 values to true/false, either in the API response or after the response s received. That's working OK.

ekwoka Feb 7, 2024

It doesn't actually cause the value to change though, does it?

Like you mean using the form like that and using native submission would also change it to true/false?

I didn't experience this in a quick check.

Could just not use model and just @change="checkyValue = $el.checked ? $el.value : null"

It's still a bit strange. Can your server not change it on the back before you ship it to the db? Surely you're doing backend validation already.

You'd still need a '0' anyway, no?

SimoTod Feb 7, 2024
Collaborator

For single checkboxes, x-model uses the checked value (https://github.com/alpinejs/alpine/blob/main/packages%2Falpinejs%2Fsrc%2Fdirectives%2Fx-model.js#L152).
I can't tell you the reason, it's always been like that, I don't think it will be possible to change the behaviour because it would be a breaking change.

You can manually add a listener and update the checked property manually (don't bind the attribute, use x-effect to update $el.checked) as suggested if you need the real value

docdunning Feb 7, 2024
Author

It doesn't actually cause the value to change though, does it?

Yes, it does. Here's a demo page. As you click the button, the modelled variable is incremented, and this updates the value of the checkbox as per the console.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"></script>
</head>
<body>
  <div x-data="check">
    <p>
      <input type="checkbox" value="1" x-model="tickbox" x-ref="box">
      <span x-text="tickbox"></span>
      <button @click="updateBox">Click</button>
    </p>
  </div>
<script>
document.addEventListener('alpine:init', () => {
  Alpine.data('check',() => ({
    tickbox: 1,
    updateBox: function () {
      this.tickbox++
      console.log(this.$refs.box.value)
    }
  }))
})
</script>
</body>
</html>

docdunning · 2024-02-07T13:47:08Z

docdunning
Feb 7, 2024
Author

@SimoTod @ekwoka

Thanks for your replies. I realise after all this, that I'm overthinking it. I don't need to x-model anything in this case.

I can just use the value from the API response to set the checked attribute, and then use the normal form checkbox behaviour. If the box is checked, it is submitted with the value 1. If it's not checked, then it isn't submitted at all, and the server supplies a default value.

<input type="checkbox"
    value="1"
    name="publish"
    :checked="api.publish==1"
>

0 replies

docdunning · 2024-02-07T19:23:22Z

docdunning
Feb 7, 2024
Author

For info - I've settled on this approach, which keeps things simple and in sync.

<input type="checkbox"
   x-bind:checked="api.publish == 1"
   x-on:click="api.publish = $el.checked ? 1 : 0"
>

It means that I can use my api.publish variable elsewhere to drive x-show elements, for example, but it avoids the problems I was having with x-model.

The x-bind:checked attribute is actually only needed on the initial load to set the default state of the box. Having it like this means that the attribute is toggled on and off as the bound variable changes, which is over the top.

2 replies

SimoTod Feb 7, 2024
Collaborator

It's better to use x-on:change instead of x-on:click. With a click listener directly on the checkbox if you have a label tag for your checkbox, by clicking on the label, you will toggle the checkbox but you won't update the variable.

docdunning Feb 7, 2024
Author

@SimoTod

It's better to use x-on:change instead of x-on:click.

Understood - thanks for that :-)

tommy4st · 2025-04-27T15:16:51Z

tommy4st
Apr 27, 2025

I know, I'm late for the game, but you're using the wrong control. The first responder was right: Checkboxes are either for true or false (boolean) values or for selecting multiple values. Both scenarios are covered by Alpinejs.

In your case, you want to select a specific value. That's what select or input[type=radio] are for. Checkboxes don't make sense because you probably don't have an article, which can be both published and unpublished at the same time.

So here's my solution for you:

<label><input type="radio" x-model="api.publish" value="1">published</label>
<label><input type="radio" x-model="api.publish" value="0">unpublished</label>

(You can still add .number to x-model, if the value must be numeric)

1 reply

docdunning Apr 27, 2025
Author

Thanks for the suggestion - I accept that radio buttons are another way to approach the issue, but I only wanted to have the checkbox to represent the "yes/no" option on the form.

A checkbox's default value is "on", but it's perfectly legitimate to assign a different value which will be submitted with the form if the box is checked. My issue was that the boolean is represented in the backend database as "1/0", and I wanted to model that value directly in the checkbox.

Fair enough, it can't be done with AlpineJS, so I had to go about it in a different way.

lonix1 · 2025-07-19T03:04:44Z

lonix1
Jul 19, 2025

The only thing that worked for me was:

<input type="checkbox"
       x-init="$el.value = myValue"
       x-bind:checked="myValue"
       x-on:change="$el.value = $el.checked"
       /></td>

This is very counter intuitive and complicated. I've been using alpinejs for a while now and always stumble over checkboxes.

There should be a new subsection in the docs explaining how to deal with single and multiple checkboxes.

0 replies

Uh oh!

Checkbox ignores value attribute when checked #4018

Uh oh!

docdunning Feb 6, 2024

Replies: 6 comments · 8 replies

Uh oh!

Uh oh!

ekwoka Feb 7, 2024

Uh oh!

docdunning Feb 7, 2024 Author

Uh oh!

ekwoka Feb 7, 2024

Uh oh!

docdunning Feb 7, 2024 Author

Uh oh!

Uh oh!

ekwoka Feb 7, 2024

Uh oh!

SimoTod Feb 7, 2024 Collaborator

Uh oh!

docdunning Feb 7, 2024 Author

Uh oh!

Uh oh!

docdunning Feb 7, 2024 Author

Uh oh!

docdunning Feb 7, 2024 Author

Uh oh!

SimoTod Feb 7, 2024 Collaborator

Uh oh!

docdunning Feb 7, 2024 Author

Uh oh!

tommy4st Apr 27, 2025

Uh oh!

docdunning Apr 27, 2025 Author

Uh oh!

lonix1 Jul 19, 2025

docdunning
Feb 6, 2024

Replies: 6 comments 8 replies

ekwoka
Feb 7, 2024

docdunning
Feb 7, 2024
Author

docdunning Feb 7, 2024
Author

SimoTod Feb 7, 2024
Collaborator

docdunning Feb 7, 2024
Author

docdunning
Feb 7, 2024
Author

docdunning
Feb 7, 2024
Author

SimoTod Feb 7, 2024
Collaborator

docdunning Feb 7, 2024
Author

tommy4st
Apr 27, 2025

docdunning Apr 27, 2025
Author

lonix1
Jul 19, 2025