Скрывать раздел выставления счетов, когда установлен флажок «То же, что и адрес доставки»?

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.Дом «То же, что и адрес доставки» находится не внутри «form2», он должен находиться между «form1» и «form2», например, «....» как адрес доставки ». В противном случае,Вы не можете переключать показывать содержимое.2. добавьте событие onChange в поле «такой же, как адрес доставки», если значение отмечено, вы можете добавить класс в «», содержание класса будет «display: none»