"Cannot read property 'toLowerCase' of undefined" in checkbox related script

"Cannot read property 'toLowerCase' of undefined" in checkbox related script

I have a set of checkboxes that are intended to toggle the visibility of corresponding form groups.

  1. <div class="form-group" id="backgrounds_picker">
  2.   <label class="col-md-4 control-label" for="checkboxes">
  3.     Select any desired backgrounds:</label>
  4.   <div class="col-md-4">
  5.     <label class="checkbox-inline" for="checkboxes-0">
  6.           <input name="checkboxes" id="checkboxes-0" type="checkbox" value="blank">
  7.           Blanks
  8.         </label>
  9.     <label class="checkbox-inline" for="checkboxes-1">
  10.           <input name="checkboxes" id="checkboxes-1" type="checkbox" value="fresh">
  11.           Fresh Water
  12.         </label>
  13.     <label class="checkbox-inline" for="checkboxes-2">
  14.           <input name="checkboxes" id="checkboxes-2" type="checkbox" value="marine">
  15.           Marine Water
  16.         </label>
  17.     <label class="checkbox-inline" for="checkboxes-3">
  18.           <input name="checkboxes" id="checkboxes-3" type="checkbox" value="rain">
  19.           Rain
  20.         </label>
  21.     <label class="checkbox-inline" for="checkboxes-4">
  22.           <input name="checkboxes" id="checkboxes-4" type="checkbox" value="none" checked="checked">
  23.           None
  24.         </label>
  25.   </div>
  26. </div>

  28. <div id="fields">
  29.   <div id="blank_co" class="form-group">
  30.     <label class="col-md-4 control-label" for="blankbg">Blanks cutoff: (1-99)</label>
  31.     <div class="col-md-4">
  32.       <input name="blankbg" class="form-control input-md" id="blankbg" required="" type="text" placeholder="" value="10">
  33.     </div>
  34.   </div>

  36.   <div id="fresh_co" class="form-group">
  37.     <label class="col-md-4 control-label" for="freshbg">Fresh water cutoff: (1-99)</label>
  38.     <div class="col-md-4">
  39.       <input name="freshbg" class="form-control input-md" id="freshbg" required="" type="text" placeholder="" value="10">
  40.     </div>
  41.   </div>

  43.   <div id="marine_co" class="form-group">
  44.     <label class="col-md-4 control-label" for="marinebg">Marine water cutoff: (1-99)</label>
  45.     <div class="col-md-4">
  46.       <input name="marinebg" class="form-control input-md" id="marinebg" required="" type="text" placeholder="" value="10">
  47.     </div>
  48.   </div>

  50.   <div id="rain_co" class="form-group">
  51.     <label class="col-md-4 control-label" for="rainbg">Rain water cutoff: (1-99)</label>
  52.     <div class="col-md-4">
  53.       <input name="rainbg" class="form-control input-md" id="rainbg" required="" type="text" placeholder="" value="10">
  54.     </div>
  55.   </div>
  56. </div>

The script I have written for the above HTML gives a "Cannot read property 'toLowerCase' of undefined" error in the console instead of just... working.

  1. var $check = $('#backgrounds_picker input[type="checkbox"][value!="none"]'),
  2.   $none = $('input[type="checkbox"][value="none"]'),
  3.     $groups = $('#fields .form-group');
  4.     
  5. var uncheckAll = function() {
  6.   if ($(this).is(':checked')) {
  7.     $check.not(this).prop('checked', false);
  8.   }
  9. }

  11. var uncheckNone = function() {
  12.   if ($(this).is(':checked')) {
  13.     $none.prop('checked', false);
  14.   }
  15. }

  17. var hideGroup = function(){
  18. $groups.fadeOut();
  19. }

  21. var toggleGroup = function(){
  22. var groupId = $(this).val();
  23.   if ($(this).is(':checked')) {
  24.   $('#' + groupId + '_co').fadeIn();
  25.   } else {
  26.   $('#' + groupId + '_co').fadeOut();
  27.   }
  28. }

  30. $none.on('change', function(){
  31. uncheckAll();
  32.   hideGroup();
  33. });

  35. $check.on('change', function(){
  36. uncheckNone();
  37.   toggleGroup();
  38. });

Where is my mistake?