Moved "checkbox" tests into unit tests.

build/src/FormToObject.d.ts

@@ -27,7 +27,8 @@ export declare class FormToObject {
          * }
          * ```
           */
-        phpStyleMultipleSelects: boolean;
+        selectNameWithEmptyBracketsReturnsArray: boolean;
+        checkBoxNameWithEmptyBracketsReturnsArray: boolean;
         debug: boolean;
     };
     constructor(selector: string | HTMLFormElement, options?: IFormToObjectOptions);

build/src/dom.d.ts

@@ -8,7 +8,7 @@ import { HTMLFormField } from "./types";
 export declare function isDomElementNode(node: HTMLFormElement): boolean;
 export declare function isUploadForm($form: HTMLFormElement): boolean;
 export declare function isRadio($domNode: HTMLInputElement): boolean;
-export declare function isCheckbox($domNode: HTMLInputElement): boolean;
+export declare function isCheckbox($domNode: HTMLFormField): boolean;
 export declare function isFileField($domNode: HTMLInputElement): boolean;
 export declare function isTextarea($domNode: HTMLTextAreaElement): boolean;
 export declare function isSelectSimple($domNode: HTMLFormField): boolean;

src/FormToObject.ts

@@ -41,7 +41,8 @@ export class FormToObject {
      * }
      * ```
       */
-    phpStyleMultipleSelects: true,
+    selectNameWithEmptyBracketsReturnsArray: true,
+    checkBoxNameWithEmptyBracketsReturnsArray: true,
     debug: true
   };
 
@@ -131,22 +132,27 @@ export class FormToObject {
       }
 
       if (objKeyNames && objKeyNames.length > 1) {
-        if (isSelectMultiple($domNode) && this.settings.phpStyleMultipleSelects) {
-          // Check for name in this format <select --> name="multiple[]" <--- multiple>
+        if (isSelectMultiple($domNode) && this.settings.selectNameWithEmptyBracketsReturnsArray) {
+          // Check for name in this format <select ---> name="multiple[]" <--- multiple />
           // Keep the name as "multiple" so it matches the PHP style POST payload format.
           if (objKeyNames.length === 2 && objKeyNames[1] === '[]') {
             objKeyNames = [objKeyNames[0]];
           }
         }
+
+        // Check for name in this format <input type="checkbox" ---> name="checkbox[]" <--- />
+        if (isCheckbox($domNode) && this.settings.checkBoxNameWithEmptyBracketsReturnsArray) {
+          if (objKeyNames.length === 2 && objKeyNames[1] === '[]') {
+            objKeyNames = [objKeyNames[0]];
+          }
+        }
+
         this.processMultiLevelNode($domNode, objKeyNames, (domNodeValue ? domNodeValue : ''), result);
       }
 
     }
 
-    // Check the length of the result.
-    const resultLength = getObjLength(result);
-
-    return resultLength > 0 ? result : false;
+    return result;
   }
 
   public getNodeValues($domNode: HTMLFormField) {

src/dom.ts

@@ -18,7 +18,7 @@ export function isRadio($domNode: HTMLInputElement) {
   return $domNode.nodeName === 'INPUT' && $domNode.type === 'radio';
 }
 
-export function isCheckbox($domNode: HTMLInputElement) {
+export function isCheckbox($domNode: HTMLFormField) {
   return $domNode.nodeName === 'INPUT' && $domNode.type === 'checkbox';
 }
 

test/unit/checkbox.test.ts

@@ -0,0 +1,103 @@
+import {FormToObject} from "../../src/FormToObject";
+
+describe('checkbox', () => {
+  it('unchecked checkboxes, should return {}', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+        <input type="checkbox" name="single" value="single" />
+        <input type="checkbox" name="many[]" value="many 0" />
+        <input type="checkbox" name="many[]" value="many 1" />
+        <input type="checkbox" name="more[first]" value="more first" />
+        <input type="checkbox" name="more[second]" value="more second" />
+    `;
+
+    const formToObject = new FormToObject($form)
+
+    expect(formToObject.convertToObj()).toEqual({});
+  });
+
+  it('a single checkbox without value attribute, should return the default value "on" as a string.', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+          <input type="checkbox" name="terms" checked/>
+    `;
+
+    const formToObject = new FormToObject($form);
+
+    expect(formToObject.convertToObj()).toEqual({
+      terms: "on"
+    });
+  });
+
+  it('two checkboxes with the same name and different values should return the checked element value as an array', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+          <input type="checkbox" name="checkbox" value="first" checked/>
+          <input type="checkbox" name="checkbox" value="second"/>
+    `;
+
+    const formToObject = new FormToObject($form);
+
+    expect(formToObject.convertToObj()).toEqual({
+      checkbox: ["first"]
+    });
+  });
+
+  it('two checkboxes with the same name and different values, both checked, should return value as an array', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+          <input type="checkbox" name="checkbox" value="first" checked/>
+          <input type="checkbox" name="checkbox" value="second" checked/>
+    `;
+
+    const formToObject = new FormToObject($form);
+
+    expect(formToObject.convertToObj()).toEqual({
+      checkbox: ["first", "second"]
+    });
+  });
+
+  it('checkboxes named checkbox[] should return an array of values, by default', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+        <input type="checkbox" name="checkbox[]" value="first" checked />
+        <input type="checkbox" name="checkbox[]" value="second" checked />
+    `;
+
+    const formToObject = new FormToObject($form);
+
+    expect(formToObject.convertToObj()).toEqual({
+      checkbox: ["first", "second"]
+    });
+  });
+
+  it('checkboxes named checkbox[] should return an array of values, when checkBoxNameWithEmptyBracketsReturnsArray = false', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+        <input type="checkbox" name="checkbox[]" value="first" checked />
+        <input type="checkbox" name="checkbox[]" value="second" checked />
+    `;
+
+    const formToObject = new FormToObject($form, { checkBoxNameWithEmptyBracketsReturnsArray: false });
+
+    expect(formToObject.convertToObj()).toEqual({
+      checkbox: {0: "first", 1: "second" }
+    });
+  });
+
+  it('checkboxes named checkbox[a] and checkbox[b] return an object', () => {
+    const $form = document.createElement('form');
+    $form.innerHTML = `
+        <input type="checkbox" name="checkbox[a]" value="a" checked />
+        <input type="checkbox" name="checkbox[b]" value="b" checked />
+    `;
+
+    const formToObject = new FormToObject($form);
+
+    expect(formToObject.convertToObj()).toEqual({
+      checkbox: {"a": "a", "b": "b" }
+    });
+  });
+});
+
+

test/unit/settings.test.ts

@@ -1,7 +1,7 @@
 import {FormToObject} from "../../src/FormToObject";
 
 describe('settings', () => {
-  describe('phpStyleMultipleSelects', () => {
+  describe('selectNameWithEmptyBracketsReturnsArray', () => {
     it('when true, should return "multiple" key and array as value', () => {
       const $formEl = document.createElement('form');
       const $formInner = document.createElement('div');
@@ -13,7 +13,7 @@ describe('settings', () => {
     `;
       $formEl.appendChild($formInner);
 
-      const formToObject = new FormToObject($formEl, { phpStyleMultipleSelects: true });
+      const formToObject = new FormToObject($formEl, { selectNameWithEmptyBracketsReturnsArray: true });
       const result = formToObject.convertToObj();
 
       expect(result).toEqual({"multiple": ["a", "b"]});
@@ -30,7 +30,7 @@ describe('settings', () => {
     `;
       $formEl.appendChild($formInner);
 
-      const formToObject = new FormToObject($formEl, { phpStyleMultipleSelects: false });
+      const formToObject = new FormToObject($formEl, { selectNameWithEmptyBracketsReturnsArray: false });
       const result = formToObject.convertToObj();
 
       expect(result).toEqual({"multiple": [["a", "b"]]});
@@ -52,7 +52,7 @@ describe('settings', () => {
     `;
       $formEl.appendChild($formInner);
 
-      const formToObject = new FormToObject($formEl, { phpStyleMultipleSelects: false });
+      const formToObject = new FormToObject($formEl, { selectNameWithEmptyBracketsReturnsArray: false });
       const result = formToObject.convertToObj();
 
       expect(result).toEqual({"multiple": [["a", "b"], ["c", "d"]]});