fix(checkbox-model-array-consistency)

extract helper to use when we compute the 'checked' attribute to keep it consistent

src/directives/bind.js

@@ -1,4 +1,4 @@
-import { arrayUnique, isBooleanAttr, convertClassStringToArray, camelCase } from '../utils'
+import { arrayUnique, checkedAttrLooseCompare, isBooleanAttr, convertClassStringToArray, camelCase } from '../utils'
 import Alpine from '../index'
 
 export function handleAttributeBindingDirective(component, el, attrName, expression, extraVars, attrType, modifiers) {
@@ -19,7 +19,7 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             if (el.attributes.value === undefined && attrType === 'bind') {
                 el.value = value
             } else if (attrType !== 'bind') {
-                el.checked = el.value == value
+                el.checked = checkedAttrLooseCompare(el.value, value)
             }
         } else if (el.type === 'checkbox') {
             // If we are explicitly binding a string to the :value, set the string,
@@ -32,7 +32,7 @@ export function handleAttributeBindingDirective(component, el, attrName, express
                     // I'm purposely not using Array.includes here because it's
                     // strict, and because of Numeric/String mis-casting, I
                     // want the "includes" to be "fuzzy".
-                    el.checked = value.some(val => val == el.value)
+                    el.checked = value.some(val => checkedAttrLooseCompare(val, el.value))
                 } else {
                     el.checked = !!value
                 }

src/directives/model.js

@@ -1,5 +1,5 @@
 import { registerListener } from './on'
-import { isNumeric } from '../utils'
+import { isNumeric, checkedAttrLooseCompare } from '../utils'
 
 export function registerModelListener(component, el, modifiers, expression, extraVars) {
     // If the element we are binding to is a select, a radio, or checkbox
@@ -35,7 +35,7 @@ function generateModelAssignmentFunction(el, modifiers, expression) {
             // If the data we are binding to is an array, toggle its value inside the array.
             if (Array.isArray(currentValue)) {
                 const newValue = modifiers.includes('number') ? safeParseNumber(event.target.value) : event.target.value
-                return event.target.checked ? currentValue.concat([newValue]) : currentValue.filter(i => i !== newValue)
+                return event.target.checked ? currentValue.concat([newValue]) : currentValue.filter(el => !checkedAttrLooseCompare(el, newValue))
             } else {
                 return event.target.checked
             }

src/utils.js

@@ -20,6 +20,10 @@ export function isTesting() {
         || navigator.userAgent.includes("jsdom")
 }
 
+export function checkedAttrLooseCompare(valueA, valueB) {
+    return valueA == valueB
+}
+
 export function warnIfMalformedTemplate(el, directive) {
     if (el.tagName.toLowerCase() !== 'template') {
         console.warn(`Alpine: [${directive}] directive should only be added to <template> tags. See https://github.com/alpinejs/alpine#${directive}`)