如何隐藏和显示标签控件JavaScript

How to hide and show label control JavaScript?

本文关键字：显示 标签 控件 JavaScript 何隐藏 隐藏      更新时间：2023-09-26

我有一个项目，我必须为网上购物设置发货地址。对于支付，支付选项是各种信用卡，例如：贝宝，签证等，所以支付选项是一个下拉菜单。

我有两个标签，即"信用卡号码"answers"ccv"。这些最初应该隐藏起来。一旦选择了付款选项（从下拉列表中），这两个标签就会出现。

$(document).ready(function() {
  $('.nav-toggle').click(function() {
    //get collapse content selector
    var collapse_content_selector = $(this).attr('href');
    //make the collapse content to be shown or hide
    var toggle_switch = $(this);
    $(collapse_content_selector).toggle(function() {
      if ($(this).css('display') == 'none') {
        //change the button label to be 'Show'
        toggle_switch.html('Show');
      } else {
        //change the button label to be 'Hide'
        toggle_switch.html('Hide');
      }
    });
  });
});
.round-border {
  border: 1px solid #eee;
  border: 1px solid rgba(0, 0, 0, 0.05);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <section class="round-border">
    <div>
      <button href="#collapse1" class="nav-toggle">credit card</button>
    </div>
    <div id="collapse1" style="display:none">
      <label>
        Payment Option
        <select name="credit">
          <option value="paypal">Paypal</option>
          <option value="Visa">Visa</option>
          <option value="Visa">Master Card</option>
          <option value="Discover">Discover</option>
          <option value="American Express">American Express</option>
          <option value="Alipay">Alipay</option>
        </select>
      </label>
      <br>Card Number:
      <input type="text" size="24" maxlength="20" name="cc_number" onBlur="
    				  
    				  cc_number_saved = this.value;
    				  this.value = this.value.replace(/[^'d]/g, '');
    				  if(!checkLuhn(this.value)) {
    				    alert('Sorry, this is not a valid number - Please try again!');
    				    this.value = '';
    				  }
    				" onFocus="
    				  // restore saved string
    				  if(this.value != cc_number_saved) this.value = cc_number_saved;
    				">
      <input type="submit" type="submit" name="submit" value="Ok">
      <br>ccv:&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
      <input type="text" name="ccv" required>
      <br>
    </div>
  </section>
</body>

此代码按照您的要求执行。

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
label {
  display:none;
}
</style>
<script> 
function display() {
  ccn.style.display='inherit';
  ccv.style.display='inherit';
}
</script>
</head>
<body>
<form>
<select onchange='display();'>
  <option selected>Please select...</option>
  <option>Visa</option>
  <option>MasterCard</option>
  <option>Paypal</option>
</select>
<label id='ccn'>Credit Card Number</label>
<label id='ccv'>Credit Card Validation</label>
</form>
</body>
</html>


function display() {
  ccn.style.display = 'inherit';
  ccv.style.display = 'inherit';
}
label {
  display: none;
}
<form>
  <select onchange='display();'>
    <option selected>Please select...</option>
    <option>Visa</option>
    <option>MasterCard</option>
    <option>Paypal</option>
  </select>
  <label id='ccn'>Credit Card Number</label>
  <label id='ccv'>Credit Card Validation</label>
</form>

label元素的CSS最初不显示标签。当下拉列表更改时，onChange事件将触发，它将调用display()函数。然后，通过DOM更改标签的样式，使标签可见。

我不知道脚本规则，但为了符合要求，我修改了代码。

相关文章：