unexpected javascript behavior in input type checkbox

Question

I have an element in my asp.net core 2.0/mvc6 project which is an input of type checkbox. I was just testing how to change the value of another hidden element while toggling this checkbox and couldn't get it working, so I used the simple jquery that is shown to see what the click results were.

Html

<div class="col-xs-7 col-sm-8">
     <label class="css-input switch switch-sm switch-success">
          <input type="checkbox" id="validation-terms" name="validation-terms"><span></span> I agree to all terms
     </label>
 </div>
 <div class="col-xs-5 col-sm-4">
     <div class="font-s13 text-right push-5-t">
         <a href="#" data-toggle="modal" data-target="#modal-terms">View Terms</a>
      </div>
</div>
@Html.HiddenFor(m =>m.Terms, new { id="register-terms" })

Javascript

$terms is the variable for the element

var $terms = $("#validation-terms");
//toggle the slider when terms modal agree button clicked
        $terms.on('click', function () {

            if ($terms.is(':checked')) {
                //$terms.prop('checked', false);
                //$('#register-terms').val(false);
                alert("changing to blank");
            } else {
                //$terms.prop('checked', true);
                //$('#register-terms').val(true); 
                alert("changing to green");
            }

        });

The page loads with the slider unchecked (blank, greyed out, whatever you want to call it) which is normal behavior unless you add the checked attribute. Upon clicking the checkbox (it is a slider) you would expect the javascript to detect it is unchecked and show the changing to green message, the behavior is the opposite! The first time you click it, you get the changing to blank message, the slider goes green, when you click it again, now it is in checked state (supposedly), you get the changing to green message and it goes back to blank.

What am I missing here?

MUlferts · Accepted Answer · 2017-11-01T12:21:53.533

I am not sure if your $terms variable was being used properly since you didn't include code where $terms was initialized, but using a reference to "this" inside of the click function will get the actual value of the checkbox being clicked. See the snippet below to see if it helps in understanding the issue. It seems to show the correct alerts for me according to the code you provided:

$(function(){
  //toggle the slider when terms modal agree button clicked
  $terms = $("#validation-terms");
  $terms.change(function () {
      //If the current click if checking the box:
      if ($(this).is(':checked')) {
          //$terms.prop('checked', false);
          //$('#register-terms').val(false);
          alert("Checking the checkbox");
      } else { //If the current click is un-checking the box:
          //$terms.prop('checked', true);
          //$('#register-terms').val(true); 
          alert("Unchecking the checkbox");
      }

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-7 col-sm-8">
     <label class="css-input switch switch-sm switch-success">
          <input type="checkbox" id="validation-terms" name="validation-terms"><span></span> I agree to all terms
     </label>
 </div>
 <div class="col-xs-5 col-sm-4">
     <div class="font-s13 text-right push-5-t">
         <a href="#" data-toggle="modal" data-target="#modal-terms">View Terms</a>
      </div>
</div>
<input type="hidden" id="register-terms" >

Here is basically how a change or click event works with a checkbox:

$('#checkbox1').change(function() {
   if($(this).is(":checked")) {
      //'checked' event code
   }
   else {
      //'unchecked' event code
   }
});

That is the expected behavior of a click function on a checkbox. See this SO question with attached fiddle for a little better demo: https://stackoverflow.com/questions/7031226/jquery-checkbox-change-and-click-event — MUlferts, Oct 31 '17 at 19:26
...are you saying the click event can't or doesn't check the checked property correctly and I should use the change event for that? Thats what Im interpreting from the link you showed. — dinotom, Oct 31 '17 at 19:38
No, they both check the checked property the same. On a change/click event, the checked value will display the value that you just checked. If you are checking the checkbox, the value of $(this) will show checked. If you are unchecking it, you will show checked = false. The change function will capture the currently selected value. — MUlferts, Oct 31 '17 at 19:42
I just updated the snippet with a change event. Same behavior. I think you may just be expecting the opposite behavior of what happens. — MUlferts, Oct 31 '17 at 19:44

unexpected javascript behavior in input type checkbox

1 Answers1