JQuery checkbox and uncheck using if and else function - unable to get it working

Question

Can one kindly help me. I'm very new to jQuery.

• i have a checkbox with an id #userj_neednotice

what i want to do is:

• when a user ticks the checkbox, the content with the class .check_box_notice_content should show
• when the user unchecks the box, the content with the class .check_box_notice_content should hide
• when the user has ticked the check box with the id #userj_neednotice and the page is refreshed and the checkbox is still ticked the content with the class .check_box_notice_content should show
• i really do not want use toggle, your advise would be much appreciated

html

<div class="notice_info">
  <%= f.input :neednotice, label: "Do you need to give notice?", id: "userj_neednotice" %>
  <div class='check_box_notice_content hide'>
    <%= f.association :category_notice, collection: CategoryNotice.all, prompt: "please choose", label: 'notice period' %>
    <%= f.text_field :stratdate, label: "when can you start?", class: "datepicker", placeholder: "when can you start work? select date" %>                
  </div>
</div>

jQuery

$(document).ready(function() {
  $("#userj_neednotice").click(function () {
    $(".check_box_notice_content").removeClass("hide");
    if ($('.userj_neednotice').checked == true) {
      $(".check_box_notice_content").removeClass("hide");
    }
  });
});

Answer 1

Jquery also has a toggleClass option that you can provide a boolean (whether or not the checkbox is checked). First step is getting the checked value itself. As mentioned $('#userj_neednotice') returns a jquery collection. You can either get the property of the first item with prop or get the underlying vanilla object with $('#userj_neednotice')[0].checked

Combining that with toggleClass, you can hide or show the contents with:

   $(".check_box_notice_content").toggleClass("hide", !$('#userj_neednotice')[0].checked); 

The above can be run on load (document ready) to show the contents, provided that the server controls if the checkbox is checked (otherwise you have to use cookies as Sebastian mentioned)

The checkbox change event can reuse the code if you put it in a function or it can use this to check the state:

$("#userj_neednotice").change(function () {
    $(".check_box_notice_content").toggleClass("hide", !this.checked);    
});

---

edit to give a short example of reusing the function which was mentioned above, both calls (onload and change) could be combined as follows:

function checkVisible(){
        $(".check_box_notice_content").toggle(this.checked==true); 
}

checkVisible.call($('#userj_neednotice').change(checkVisible)[0]);

Used toggle instead of toggleClass to show that toggle can also work with a boolean value, but if you prefer a class toggleClass can be used in the same manner. Example fiddle

Answer 2

Working fiddle

You could create a function called for example show_notice_if_checked then call it on ready function (for case of refresh) and call it in change event (for case of check/uncheck) :

$(document).ready(function() {
    function show_notice_if_checked(){
        if ( $("#userj_neednotice").is(":checked") ) {
            $(".check_box_notice_content").show();
        }
        else {
          $(".check_box_notice_content").hide();
        }
    }

    show_notice_if_checked(); //Case of refresh

    //Case of change
    $("#userj_neednotice").change(function () {
      show_notice_if_checked();
    });
});

Hope this helps.

---

Checked by default example

function show_notice_if_checked(){
  if ( $("#userj_neednotice").is(":checked") ){
    $(".check_box_notice_content").show();
  }
  else {
    $(".check_box_notice_content").hide();
  }
}

show_notice_if_checked(); //Case of refresh

//Case of change
$("#userj_neednotice").change(function () {
  show_notice_if_checked();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="notice_info">
  <input type="checkbox" id="userj_neednotice" checked/>
  <div class='check_box_notice_content hide'>
    Notice text here
  </div>
</div>

Answer 3

You need to use .prop() (Jquery 1.6+) to check the checked attribute, because you are using a class selector (this would return a set of elements, not just one).

$(document).ready(function() {
  $("#userj_neednotice").change(function () {
    if ($('.userj_neednotice').prop('checked')) {
      $(".check_box_notice_content").show();
    }
    else{
      $(".check_box_notice_content").hide();
    }
  });
});

Notice that I also changed the event to change instead of click, since in my opinion would be more semantically correct.