Question 37315 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

javascript show/hide not working as expected with html field – Jquery

The following is the chose I am using to let the user manually choose working/starting time.

<input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>

<div class="input-group date" id="id_1">
      <input type="text" name="day11" value="09:00 AM" class="form-control"
          placeholder="End time" title="" required/>
        <div class="input-group-addon input-group-append">
              <div class="input-group-text">
                   <i class="glyphicon glyphicon-time fa fa-clock-o"></i>
              </div>
        </div>
    </div> 


    <script>
  $("#beastmode").click(function () {
    if ($(this).prop('checked') === true) {
        $('#id_1,#id_2').show();
    } else {
        $('#id_1,#id_2').hide();
    }
});
</script>

By default the field should be hidden, but it is not. Instead even in the checkbox is not checked, the field is visible and to make it hidden I had to check the box and uncheck it again. Then the input field goes hidden. How can i fix this ?

Here is the jsfiddle link, it shows the same problem.
https://jsfiddle.net/shijilt/bs02m98w/

Tags:

2

Answers


  1. 0

    The code is only changing the visibility after clicking the #beastmode element. There’s no explicit default otherwise.

    You can hide it when the page loads:

    $(function () {
  $('#id_1,#id_2').hide();
});

    Or, even better, style it to be hidden by default in your CSS:

    #id_1,#id_2 {
  display: none;
}

    That way it’s hidden by default from the styling itself, regardless of whether or not any JavaScript code successfully executes.

    Example

    Login or Signup to reply.
  2. 0

    Almost you code is fine. Try this it will work definitely.

    <input type="checkbox" class="testmethod" id="beastmode" name="beastmode" tabindex="5">Beast Mode</input>

<div class="input-group date" id="id_1" style="display:none;">
  <input type="text" name="day11" value="09:00 AM" class="form-control"
      placeholder="End time" title="" required/>
    <div class="input-group-addon input-group-append">
          <div class="input-group-text">
               <i class="glyphicon glyphicon-time fa fa-clock-o"></i>
          </div>
    </div>
</div> 





<script>
   $("#beastmode").click(function () {
       if ($(this).prop('checked') === true) {
           $('#id_1').show();
       } else {
           $('#id_1').hide();
       }
    });
</script>
    1. First you have to hide div where id=#id_1 there are many ways to hide but i use simple method to hide it by display: none; in the style.
    2. Second when you click on checkbox if its true its show the div where id=#id_1 else it will hide the div. If you pass two ids which is wrong because its not found #id_2 in the page that’s the reason which not show/hide your content.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search