Merge pull request #143 from kayhadrin/improve-radio-box-binders

Improve checked/unchecked binders for radio box

 describe('Routines', function() {
 describe('Routines', function() {
-  var el, input;
+  var el, input, trueRadioInput, falseRadioInput, checkboxInput;
+
+  var createInputElement = function(type, value) {
+    var elem = document.createElement('input');
+    elem.setAttribute('type', type);
+    if (value !== undefined){
+      elem.setAttribute('value', value);
+    }
+    document.body.appendChild(elem);
+    return elem;
+  };
 
 
   beforeEach(function() {
   beforeEach(function() {
     rivets.configure({
     rivets.configure({
@@ -12,8 +22,27 @@ describe('Routines', function() {
     });
     });
 
 
     el = document.createElement('div');
     el = document.createElement('div');
-    input = document.createElement('input');
-    input.setAttribute('type', 'text');
+    document.body.appendChild(el);
+
+    input = createInputElement('text');
+
+    // to test the radio input scenario when its value is "true"
+    trueRadioInput = createInputElement('radio', 'true');
+    
+    // to test the radio input scenario when its value is "false"
+    falseRadioInput = createInputElement('radio', 'false');
+
+    // to test the checkbox input scenario
+    checkboxInput = createInputElement('checkbox');
+
+  });
+
+  afterEach(function(){
+    el.parentNode.removeChild(el);
+    input.parentNode.removeChild(input);
+    trueRadioInput.parentNode.removeChild(trueRadioInput);
+    falseRadioInput.parentNode.removeChild(falseRadioInput);
+    checkboxInput.parentNode.removeChild(checkboxInput);
   });
   });
 
 
   describe('text', function() {
   describe('text', function() {
@@ -126,33 +155,101 @@ describe('Routines', function() {
   });
   });
 
 
   describe('checked', function() {
   describe('checked', function() {
-    describe('with a truthy value', function() {
-      it('checks the element', function() {
-        rivets.binders.checked.routine(el, true);
-        expect(el.checked).toBe(true);
+    describe('with a checkbox input', function() {
+      describe('and a truthy value', function() {
+        it('checks the checkbox input', function() {
+          rivets.binders.checked.routine(checkboxInput, true);
+          expect(checkboxInput.checked).toBe(true);
         });
         });
       });
       });
 
 
       describe('with a falsey value', function() {
       describe('with a falsey value', function() {
-      it('unchecks the element', function() {
-        rivets.binders.checked.routine(el, false);
-        expect(el.checked).toBe(false);
+        it('unchecks the checkbox input', function() {
+          rivets.binders.checked.routine(checkboxInput, false);
+          expect(checkboxInput.checked).toBe(false);
+        });
+      });
+    });
+
+    describe('with a radio input with value="true"', function() {
+      describe('and a truthy value', function() {
+        it('checks the radio input', function() {
+          rivets.binders.checked.routine(trueRadioInput, true);
+          expect(trueRadioInput.checked).toBe(true);
+        });
+      });
+
+      describe('with a falsey value', function() {
+        it('unchecks the radio input', function() {
+          rivets.binders.checked.routine(trueRadioInput, false);
+          expect(trueRadioInput.checked).toBe(false);
+        });
+      });
+    });
+
+    describe('with a radio input with value="false"', function() {
+      describe('and a truthy value', function() {
+        it('checks the radio input', function() {
+          rivets.binders.checked.routine(falseRadioInput, true);
+          expect(falseRadioInput.checked).toBe(false);
+        });
+      });
+
+      describe('with a falsey value', function() {
+        it('unchecks the radio input', function() {
+          rivets.binders.checked.routine(falseRadioInput, false);
+          expect(falseRadioInput.checked).toBe(true);
+        });
       });
       });
     });
     });
   });
   });
 
 
   describe('unchecked', function() {
   describe('unchecked', function() {
-    describe('with a truthy value', function() {
-      it('unchecks the element', function() {
-        rivets.binders.unchecked.routine(el, true);
-        expect(el.checked).toBe(false);
+    describe('and a truthy value', function() {
+      describe('and a truthy value', function() {
+        it('checks the checkbox input', function() {
+          rivets.binders.unchecked.routine(checkboxInput, true);
+          expect(checkboxInput.checked).toBe(false);
+        });
+      });
+
+      describe('with a falsey value', function() {
+        it('unchecks the checkbox input', function() {
+          rivets.binders.unchecked.routine(checkboxInput, false);
+          expect(checkboxInput.checked).toBe(true);
+        });
+      });
+    });
+
+    describe('with a radio input with value="true"', function() {
+      describe('and a truthy value', function() {
+        it('checks the radio input', function() {
+          rivets.binders.unchecked.routine(trueRadioInput, true);
+          expect(trueRadioInput.checked).toBe(false);
         });
         });
       });
       });
 
 
       describe('with a falsey value', function() {
       describe('with a falsey value', function() {
-      it('checks the element', function() {
-        rivets.binders.unchecked.routine(el, false);
-        expect(el.checked).toBe(true);
+        it('unchecks the radio input', function() {
+          rivets.binders.unchecked.routine(trueRadioInput, false);
+          expect(trueRadioInput.checked).toBe(true);
+        });
+      });
+    });
+
+    describe('with a radio input with value="false"', function() {
+      describe('and a truthy value', function() {
+        it('checks the radio input', function() {
+          rivets.binders.unchecked.routine(falseRadioInput, true);
+          expect(falseRadioInput.checked).toBe(true);
+        });
+      });
+
+      describe('with a falsey value', function() {
+        it('unchecks the radio input', function() {
+          rivets.binders.unchecked.routine(falseRadioInput, false);
+          expect(falseRadioInput.checked).toBe(false);
+        });
       });
       });
     });
     });
   });
   });

@@ -274,7 +274,7 @@ Rivets.binders =
       unbindEvent el, 'change', @currentListener
       unbindEvent el, 'change', @currentListener
     routine: (el, value) ->
     routine: (el, value) ->
       if el.type is 'radio'
       if el.type is 'radio'
-        el.checked = el.value is value
+        el.checked = el.value?.toString() is value?.toString()
       else
       else
         el.checked = !!value
         el.checked = !!value
 
 
@@ -286,7 +286,7 @@ Rivets.binders =
       unbindEvent el, 'change', @currentListener
       unbindEvent el, 'change', @currentListener
     routine: (el, value) ->
     routine: (el, value) ->
       if el.type is 'radio'
       if el.type is 'radio'
-        el.checked = el.value isnt value
+        el.checked = el.value?.toString() isnt value?.toString()
       else
       else
         el.checked = !value
         el.checked = !value