Merge pull request #232 from philippbosch/checkbox-values

Allow checkboxes to have distinct values
alpinejs · Mar 7, 2020 · 3fab0cc · 3fab0cc
2 parents 98d26e1 + 0a07fe9
commit 3fab0cc
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 2 deletions.
diff --git a/dist/alpine-ie11.js b/dist/alpine-ie11.js
@@ -4943,9 +4943,9 @@
 
     return new Function(['dataContext'].concat(_toConsumableArray(Object.keys(additionalHelperVariables))), "with(dataContext) { ".concat(expression, " }")).apply(void 0, [dataContext].concat(_toConsumableArray(Object.values(additionalHelperVariables))));
   }
+  var xAttrRE = /^x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)\b/;
   function isXAttr(attr) {
     var name = replaceAtAndColonWithStandardSyntax(attr.name);
-    var xAttrRE = /x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/;
     return xAttrRE.test(name);
   }
   function getXAttrs(el, type) {
@@ -4957,7 +4957,7 @@
       _newArrowCheck(this, _this2);
 
       var name = replaceAtAndColonWithStandardSyntax(attr.name);
-      var typeMatch = name.match(/x-(on|bind|data|text|html|model|if|for|show|cloak|transition|ref)/);
+      var typeMatch = name.match(xAttrRE);
       var valueMatch = name.match(/:([a-zA-Z\-:]+)/);
       var modifiers = name.match(/\.[^.\]]+(?=[^\]]*$)/g) || [];
       return {
@@ -5522,6 +5522,13 @@
           el.checked = valueFound;
         } else {
           el.checked = !!value;
+        } // 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') {
+          el.value = value;
         }
       } else if (el.tagName === 'SELECT') {
         updateSelect(el, value);

diff --git a/dist/alpine.js b/dist/alpine.js
@@ -549,6 +549,13 @@
           el.checked = valueFound;
         } else {
           el.checked = !!value;
+        } // 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') {
+          el.value = value;
         }
       } else if (el.tagName === 'SELECT') {
         updateSelect(el, value);

diff --git a/src/directives/bind.js b/src/directives/bind.js
@@ -27,6 +27,12 @@ export function handleAttributeBindingDirective(component, el, attrName, express
             } else {
                 el.checked = !! value
             }
+            // 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') {
+                el.value = value
+            }
         } else if (el.tagName === 'SELECT') {
             updateSelect(el, value)
         } else {

diff --git a/test/bind.spec.js b/test/bind.spec.js
@@ -228,3 +228,19 @@ test('binding supports short syntax', async () => {
 
     expect(document.querySelector('span').classList.contains('bar')).toBeTruthy()
 })
+
+test('checkbox values are set correctly', async () => {
+    document.body.innerHTML = `
+        <div x-data="{ stringValue: 'foo', trueValue: true, falseValue: false }">
+            <input type="checkbox" name="stringCheckbox" :value="stringValue" />
+            <input type="checkbox" name="trueCheckbox" :value="trueValue" />
+            <input type="checkbox" name="falseCheckbox" :value="falseValue" />
+        </div>
+    `
+
+    Alpine.start()
+
+    expect(document.querySelector('input[name="trueCheckbox"]').value).toEqual('on')
+    expect(document.querySelector('input[name="falseCheckbox"]').value).toEqual('on')
+    expect(document.querySelector('input[name="stringCheckbox"]').value).toEqual('foo')
+});