根据使用javascript的复选框显示Textarea条件条件。

Question

出于某种原因我正在做一份清单。如果单击“ other ”检查表，将出现一个textarea，当检查其他原因时，textarea将消失(添加隐藏类)。目前，当我检查 other 时，会出现textarea，但当我检查其他原因时，textarea不会消失。

我的密码有什么问题吗？

​

$(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>

​

Answer 1

这是因为当textarea是假的时候，没有隐藏$(el).children("input").hasClass("other-reason-checkbox")

​

$(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>

​