Question

我如何做到这一点，以便在单击“与送货地址相同”复选框时，帐单地址部分会被隐藏？我已经坚持了一段时间，决定来这里寻求帮助。提前非常感谢您！

（在此处发布一些单词，因为代码多于文字，因此无法发布，因此请忽略此部分）

我在代码下方附加了一段代码，希望对您有所帮助：

.checkbox-custom, .radio-custom {
    margin: 0 auto;
    width: 40%;
    opacity: 0;
    position: absolute;   
}

.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    margin: 5px;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label {
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 1px solid #717171;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
}

.checkbox-custom:checked + .checkbox-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #a1cdad;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label:before {
    content: "\f00c";
    font-family: 'FontAwesome';
    font-size: 20px;
    color: #a1cdad;
}

  <form class="form1">
      
    <h6>Shipping Address</h6>  
      
    <div class="input-box">
      <input type="text" id="first-name" placeholder="John" data-type="name"/>
      <label for="first-name"><p>First Name</p></label>
    </div>
    
    <div class="input-box">
      <input type="text" id="last-name" placeholder="Smith" data-type="name"/>
      <label for="last-name"><p>Last Name</p></label>
    </div>
    
    <div class="input-box">
      <input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
      <label for="phone-number"><p>Phone Number</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="company" placeholder="Company" data-type="name"/>
      <label for="company"><p>Company Name</p></label>
    </div>  
      
    <div class="input-box">
      <input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
      <label for="address" data-type="name"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="city" placeholder="Everytown" data-type="text"/>
      <label for="city" data-type="name"><p>City</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>Texas</p></option>
        <option><p>Louisiana</p></option>
        <option><p>New Mexico</p></option>
        <option><p>Oklahoma</p></option>
      </select>
      <label for="card-type"><p>State</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="zip" placeholder="12345" data-type="text"/>
      <label for="zip" data-type="text"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>United States</p></option>
      </select>
      <label for="card-type"><p>Country</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="email" placeholder="johnsmith@gmail.com" data-type="email"/>
      <label for="email"><p>Email Address</p></label>
    </div>  
      
  </form>
    
  <form class="form2">
     
    <h6>Billing Address</h6> 
      
    <div>
        <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
        <label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>
    </div>
      
    <div class="input-box">
        <input type="text" id="first-name" placeholder="John" data-type="name"/>
        <label for="first-name"><p>First Name</p></label>
    </div>
    
    <div class="input-box">
        <input type="text" id="last-name" placeholder="Smith" data-type="name"/>
        <label for="last-name"><p>Last Name</p></label>
    </div>
    
    <div class="input-box">
        <input type="text" id="phone-number" placeholder="555-555-555" data-type="number"/>
        <label for="phone-number"><p>Phone Number</p></label>
    </div>
      
    <div class="input-box">
        <input type="text" id="company" placeholder="Company" data-type="name"/>
        <label for="company"><p>Company Name</p></label>
    </div>  
      
    <div class="input-box">
        <input type="text" id="address" placeholder="123 Main Street" data-type="text"/>
        <label for="address" data-type="name"><p>Address</p></label>
    </div>
      
    <div class="input-box">
        <input type="text" id="city" placeholder="Everytown" data-type="text"/>
        <label for="city" data-type="name"><p>City</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>Texas</p></option>
        <option><p>Louisiana</p></option>
        <option><p>New Mexico</p></option>
        <option><p>Oklahoma</p></option>
      </select>
      <label for="card-type"><p>State</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="zip" placeholder="12345" data-type="text"/>
      <label for="zip" data-type="text"><p>Address</p></label>
    </div>
      
    <div class="input-box">
      <select id="card-type">
        <option><p>United States</p></option>
      </select>
      <label for="card-type"><p>Country</p></label>
    </div>
      
    <div class="input-box">
      <input type="text" id="email" placeholder="johnsmith@gmail.com" data-type="email"/>
      <label for="email"><p>Email Address</p></label>
    </div>  
      
  </form>

Answer 1

我建议您删除帐单地址中复选框旁边的div。之后，选中此复选框后，您应该可以定位到.input-box。我添加了一个小例子来帮助。您可以添加display: none或采用我的路线，具体取决于您的辅助功能需求。如果您想知道~，您会在示例中看到它针对复选框后面的所有同级对象。我希望这会有所帮助：）

.checkbox-custom:checked ~.input-box {
  visibility: hidden;
  opacity: 0;
}

<form class="form2">

  <h6>Billing Address</h6>

  <input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
  <label for="checkbox-1" class="checkbox-custom-label">Same as shipping address</label>

    <div class="input-box">
      <input type="text" id="first-name" placeholder="John" data-type="name" />
      <label for="first-name"><p>First Name</p></label>
    </div>
    <div class="input-box">
      <input type="text" id="first-name" placeholder="John" data-type="name" />
      <label for="first-name"><p>First Name</p></label>
    </div>
</form>

Answer 2

1.dom“与收货地址相同”不在“ form2”内，它应该在“ form1”和“ form2”之间，例如，“ ....与送货地址相同。”否则，您无法切换显示内容。 2.在“与收货地址相同”复选框上添加onChange事件，如果选中该值，则可以在上添加类，类内容为“ display：none”

单击“与送货地址相同”复选框时，隐藏帐单部分？

2 个答案: