CODEWITHSUNDEEP
javascriptjquery
stud91
stud91

Reputation: 1854

Unexpected response for checkbox jQuery

I have horizontal jQuery checkbox. It should display some text when it is clicked and remove the text when it is clicked again and unchecked. However, when i first load the page and click on the box nothing happens. Then when i click it again to uncheck the text appears. It seems the opposite behaviour of what i expect is going on. Here is the code: (I can solve this problem by simply inverting the boolean sign but i want to understand why this is happening).

<form>
    <fieldset data-role="controlgroup" data-type="horizontal">
    <legend>Select your type of Restaurant:</legend>
    <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
    <label for="checkbox-h-2a" onclick="onfilter()">Vegetarian</label>
    </fieldset>
</form>

<script>
function onfilter(){

if ($("#checkbox-h-2a").prop('checked')){

    document.getElementById("hehe").innerHTML = "Yo there";
}

if (!($("#checkbox-h-2a").prop('checked'))){
    document.getElementById("hehe").innerHTML = "";
}
}       
</script>

Upvotes: 0

Views: 59

Answers (2)

Scott Selby
Scott Selby

Reputation: 9580

You're already loading jQuery , so just use jQuery for everything - it is much easier , works better, really the only downside to jQUery is having to load it - and you're already doing that. So I would suggest using something like this:

$(function(){
  $(document).on('click', '#checkbox-h-2a', function(){
     if ( $(this).is(':checked') ) {
        // Do stuff
     }
     else{
        //Do stuff
     }
  });
});

Also, I hope you are actually closing your input element in your HTML , and that this is just a typo in your question 

    <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"

try:

<fieldset data-role="controlgroup" data-type="horizontal">
   <legend>Select your type of Restaurant:</legend>
   <label for="checkbox-h-2a" >Vegetarian
      <input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" />
   </label>
</fieldset>

see how the label goes around the checkbox? also you can get rid on the inline function in HTML with the jQuery I provided

EDIT:

2 problems - one you selectd jQuery 1.6 , to you .on() you need a newer version , if you must use old jQuery let me know ,

the other problem is that all jQuery code must be wrapped in 

$(document).ready(function(){

   /// code here

});

or for short:

$(function(){

// code here

});

Upvotes: 1

King King
King King

Reputation: 63367

The problem is at the time of clicking on the label, the checkbox's checked has not been changed, so you have to toggle the logic (although it looks weird) or attach the handler to the onchange event of the checkbox input instead:

<!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" 
       onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>

Demo.

It involves how a label works, when clicking on the label, it looks for the attached input element via the for attribute and trying to change the appropriate property (checked for checkbox, radio, ...) or focusing the element (for textbox fields). So at the clicking time, it processes/calls your handler first. Hence the problem.

Note that this answer just fixes the issue, not trying to improve your code.

Upvotes: 1

Related Questions