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");
    }
  });
});

Zakaria Acharki · Accepted Answer · 2016-02-24 16:02:46Z

1

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>

edited Feb 24, 2016 at 16:02

answered Feb 24, 2016 at 15:41

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ARTLoe Over a year ago

Zakaria Acharki i think your answer may be the best answer but it stating a syntax error on this line if $("#userj_neednotice").is(":checked") { tried correcting it but still getting an error

Zakaria Acharki Over a year ago

Fixed @ARTLoe just missing parenthese there should be if ( $("#userj_neednotice").is(":checked") ) {, updated my answer by adding working fiddle.

Me.Name · Accepted Answer · 2016-02-24 16:28:47Z

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

Sebastianb · Accepted Answer · 2016-02-24 15:00:40Z

0

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.

answered Feb 24, 2016 at 15:00

Sebastianb

2,06024 silver badges31 bronze badges

2 Comments

ARTLoe Over a year ago

thank you @sebastianb but when i refresh the page the content with the class ".check_box_notice_content" is hidden. how do i get the content to still display when the page is refreshed and the box with the id "#userj_neednotice" has been checked? - i need to add something like at the beginning of the but i am unsure ` if $(".check_box_notice_content").checked== true { $(".check_box_notice_content").show(); }`

Sebastianb Over a year ago

If what you want is to "remember" the state after a refresh, You'll need to use cookies.

Collectives™ on Stack Overflow

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

3 Answers 3

Checked by default example

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Checked by default example

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related