javascript show/hide not working as expected with html field

Question

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/

David · Accepted Answer · 2022-08-02 17:35:29Z

1

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

answered Aug 2, 2022 at 17:35

David

221k42 gold badges245 silver badges337 bronze badges

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

Comments

waqaramjad606 · Accepted Answer · 2022-08-02 19:34:12Z

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>

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.
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.

Collectives™ on Stack Overflow

javascript show/hide not working as expected with html field

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related