Textarea conditioning appears based on checkbox using javascript-CodePudding

I'm making a checklist for some reason. If the Others checklist is clicked, a textarea will appear and when the other reason is checked, the textarea will disappear (add class hidden). Currently, when I check the Others, textarea appears, but when I check the other reasons the textarea doesn't disappear.

Is there something wrong with my code?

$(document).ready(function(){
  $("#cancel-reasons > .custom-checkbox").each(function() {
     const el = $(this);
     el.on('click', function(val) {
        if ($(el).children("input").attr("value") == 1) {
           $(el).children("input").attr('value', 0);
           $(el).children("input").prop('checked', false);
        } else {
           $(el).children("input").attr('value', 1);
           $(el).children("input").prop('checked', true);
        }
        if($(el).children("input").hasClass("other-reason-checkbox")) {
           if (($(el).children("input").attr("value") == 1) && ($(el).children("span").text() === "Others")) {
               $("#other-reason-textarea").removeClass("hidden")
           } else {
               $("#other-reason-textarea").addClass("hidden")
         }
      }
    });
  });
});

.hidden{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cancel-reasons" id="cancel-reasons">
  <div class="custom-control custom-checkbox">
    <input class='custom-control-input cancel-reason-checkbox' name="reason-check" value='0' data-reasonid="type-1" type="radio">
    <label class="custom-control-label" id="type-1" for="type-1"></label>
    <span>Reason1</span>
  </div>
  <div class="custom-control custom-checkbox">
    <input class='custom-control-input cancel-reason-checkbox' name="reason-check" value='0' data-reasonid="type-2" type="radio">
    <label class="custom-control-label" id="type-2" for="type-2"></label>
    <span>Reason 2</span>
  </div>
  <div class="custom-control custom-checkbox">
    <input class='custom-control-input cancel-reason-checkbox other-reason-checkbox' name="reason-check" value='0' data-reasonid="type-other" type="radio">
    <label class="custom-control-label" id="type-other" for="type-other"></label>
    <span>Others</span>
  </div>

  <textarea name="order-cancelTextArea" maxlength="100" id="other-reason-textarea" class="hidden" cols="30" rows="5"></textarea>
</div>

CodePudding user response：

That's happened because you didn't hidden the textarea when $(el).children("input").hasClass("other-reason-checkbox") is false

$(document).ready(function(){
  $("#cancel-reasons > .custom-checkbox").each(function() {
     const el = $(this);
     el.on('click', function(val) {
        if ($(el).children("input").attr("value") == 1) {
           $(el).children("input").attr('value', 0);
           $(el).children("input").prop('checked', false);
        } else {
           $(el).children("input").attr('value', 1);
           $(el).children("input").prop('checked', true);
        }
        if($(el).children("input").hasClass("other-reason-checkbox")) {
           if (($(el).children("input").attr("value") == 1) && ($(el).children("span").text() === "Others")) {
               $("#other-reason-textarea").removeClass("hidden")
           } else {
               $("#other-reason-textarea").addClass("hidden")
         }
      }
       else {
                    $("#other-reason-textarea").addClass("hidden")
                }
    });
  });
});

.hidden{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cancel-reasons" id="cancel-reasons">
  <div class="custom-control custom-checkbox">
    <input class='custom-control-input cancel-reason-checkbox' name="reason-check" value='0' data-reasonid="type-1" type="radio">
    <label class="custom-control-label" id="type-1" for="type-1"></label>
    <span>Reason1</span>
  </div>
  <div class="custom-control custom-checkbox">
    <input class='custom-control-input cancel-reason-checkbox' name="reason-check" value='0' data-reasonid="type-2" type="radio">
    <label class="custom-control-label" id="type-2" for="type-2"></label>
    <span>Reason 2</span>
  </div>
  <div class="custom-control custom-checkbox">
    <input class='custom-control-input cancel-reason-checkbox other-reason-checkbox' name="reason-check" value='0' data-reasonid="type-other" type="radio">
    <label class="custom-control-label" id="type-other" for="type-other"></label>
    <span>Others</span>
  </div>

  <textarea name="order-cancelTextArea" maxlength="100" id="other-reason-textarea" class="hidden" cols="30" rows="5"></textarea>
</div>