Html：如何让标签可见下拉？

Question

如何让我的标签可见？

我有2个下拉菜单和2个标签。

<label for="dropdown" class="answer">Model</label>

这是标签，其他与此相同，试图在显示下拉列表时将其显示。

$(".answer").hide();

<base href="http://ice.com" />
<link rel="stylesheet" href="/gasss/css/ghd.css" type="text/css" media="all" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<fieldset>

  <form id="processContactUs" name="processContactUs" action="/send_form_email.php" method="POST">

    <div>
      <label for="firstName">First name<span class="required">*</span></label>
      <input id="firstName" name="firstName" value="" type="text">
    </div>

    <div>
      <label for="lastName">Surname<span class="required">*</span></label>
      <input id="lastName" name="lastName" value="" type="text">
    </div>

    <div class="option">
      <label for="gender">Model<span class="required">*</span></label>
      <div class="gender radio-pair">
        <span>
          <input id="gender1"  name="checkdrop" class="checkdrop" value="Ghd" onClick="ckChange(this)" type="checkbox">
          <label for="gender1" onClick="ckChange(this)" >Ghd</label>
        </span>
        <span>
          <input id="gender2" name="checkdrop" class="checkdrop" value="Hair" onClick="ckChange(this)" type="checkbox">
          <label for="gender2">Hair Dryer</label>
        </span>
      </div>
    </div>

    <div>
      <label for="email">Your email<span class="required">*</span></label>
      <input id="email" name="email" value="" type="email">
    </div>

    <div class="answer">
      <label for="dropdown" class="answer">Model</label>
      <select id="Ghd" name="dropdown" checked class="dropdown">
        <option>Ghd Mk5.0</option>
        <option>Ghd Ms5.0</option>
        <option>Ghd SS5.0</option>
        <option>Ghd MK4.2B</option>
        <option>Ghd MS4.0</option>
        <option>Ghd SS4.0</option>
        <option>Ghd. Mk4.0</option>
        <option>Ghd. 3.1B</option>
        <option>Ghd 3</option>
        <option>Ghd SS</option>
     </select>
    </div>

    <div class="answer">
      <label for="dropdown" class="answer">Model</label>
      <select id="Hair" name="dropdown" class="dropdown">
        <option>toys</option>
        <option>games</option>
        <option>cartoons</option>
      </select>
    </div>

    <div class="opts">
      <p>Please enter your ghd order number where possible</p>
    </div>

    <div class="textbox">
      <label for="query">
            Your query<span class="required">*</span>
          </label>
      <textarea id="query" name="query"></textarea>
    </div>

    <div class="opts">
    </div>

    <div class="buttons">
      <input name="contactUs" value="Submit" type="submit">
    </div>
  </form>
</fieldset>

</div>
<script type="text/javascript">
  $('input[name=checkdrop]').click(function() {
    if (this.checked) {
      console.log(this.value);
      $('#' + this.value).parent().show();
    } else {
      $('#' + this.value).parent().hide();
    }
  });
</script>
<script>
  function ckChange(ckType) {
    var ckName = document.getElementsByName(ckType.name);
    var checked = document.getElementById(ckType.id);

    if (checked.checked) {
      for (var i = 0; i < ckName.length; i++) {

        if (!ckName[i].checked) {
          ckName[i].disabled = true;
        } else {
          ckName[i].disabled = false;
        }
      }
    } else {
      for (var i = 0; i < ckName.length; i++) {
        ckName[i].disabled = false;
      }
    }
  }
</script>
<script type="text/javascript">
  function valueChanged() {
    $(".answer").hide();
    $(".checkdrop").click(function() {
      if ($(this).is(":checked")) {
        $(".answer").show();
      } else {
        $(".answer").hide();
      }
    });
  };

  $(".answer").hide();
</script>

隐藏表单加载时的标签和下拉列表，以便在单击复选框时标签不显示，只显示下拉列表。

Answer 1

您可以使用display属性在CSS中执行此操作，也可以使用.show()直接从JQuery执行此操作。以下是隐藏它后显示它的示例：$(".answer").show();