fix(allow binding non-string values to checkboxes)

dist/alpine-ie11.js

@@ -6466,8 +6466,8 @@
         // If we are explicitly binding a string to the :value, set the string,
         // If the value is a boolean, leave it alone, it will be set to "on"
         // automatically.
-        if (typeof value === 'string' && attrType === 'bind') {
-          el.value = value;
+        if (value && typeof value !== 'boolean' && attrType === 'bind') {
+          el.value = String(value);
         } else if (attrType !== 'bind') {
           if (Array.isArray(value)) {
             // I'm purposely not using Array.includes here because it's

dist/alpine.js

@@ -647,8 +647,8 @@
         // If we are explicitly binding a string to the :value, set the string,
         // If the value is a boolean, leave it alone, it will be set to "on"
         // automatically.
-        if (typeof value === 'string' && attrType === 'bind') {
-          el.value = value;
+        if (value && typeof value !== 'boolean' && attrType === 'bind') {
+          el.value = String(value);
         } else if (attrType !== 'bind') {
           if (Array.isArray(value)) {
             // I'm purposely not using Array.includes here because it's

src/directives/bind.js

@@ -25,8 +25,8 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             // If we are explicitly binding a string to the :value, set the string,
             // If the value is a boolean, leave it alone, it will be set to "on"
             // automatically.
-            if (typeof value === 'string' && attrType === 'bind') {
-                el.value = value
+            if (value && typeof value !== 'boolean' && attrType === 'bind') {
+                el.value = String(value)
             } else if (attrType !== 'bind') {
                 if (Array.isArray(value)) {
                     // I'm purposely not using Array.includes here because it's

test/bind.spec.js

@@ -509,3 +509,19 @@ test('attribute binding names can contain numbers', async () => {
     expect(document.querySelector('line').getAttribute('x2')).toEqual('3');
     expect(document.querySelector('line').getAttribute('y2')).toEqual('4');
 })
+
+test('non-string and non-boolean attributes are cast to string when bound to checkbox', () => {
+    document.body.innerHTML = `
+        <div x-data="{ number: 100, bool: true, nullProp: null }">
+            <input type="checkbox" id="number" :value="number">
+            <input type="checkbox" id="boolean" :value="bool">
+            <input type="checkbox" id="null" :value="nullProp">
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('#number').value).toEqual('100')
+    expect(document.querySelector('#boolean').value).toEqual('on')
+    expect(document.querySelector('#null').value).toEqual('on')
+})