Question

当选中“与送货地址相同”时，该部分下面的表格应该消失了。我放了{display：none}，但是不起作用。当我摆脱{div class =“ checkboxalign}但它在中心不再对齐时，它起作用了。我想知道如何使此功能正常工作，但仍然使它居中对齐？谢谢。

.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;
}


.checkbox-custom:checked ~.input-box {
    display: none;
}

.checkboxalign {
    margin: 0 auto;
    width: auto;
    text-align: left;
    display: table;
    margin-bottom: 10px;
}

.radioalign {
    margin: 0 auto;
    width: auto;
    text-align: left;
    display: table;
}

<form class="form2">
  
    <div class="h6centeralign"><h6 class="h6style">Billing Address</h6></div>

    <div class="checkboxalign">
        <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>
    
   <form class="form3">
       <div class="h6centeralign"><h6 class="h6style">Shipping Method</h6></div>
       
       <div class="radioalign">
            <div>
                <input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
                <label for="radio-1" class="radio-custom-label">Free Delivery (3-5 Days)<strong>  $0.00</strong></label>
            </div>
            <div>
                <input id="radio-2" class="radio-custom"name="radio-group" type="radio">
                <label for="radio-2" class="radio-custom-label">Standard Delivery (2-3 Days)<strong> $5.99</strong></label>
            </div>
            <div>
                <input id="radio-3" class="radio-custom" name="radio-group" type="radio">
                <label for="radio-3" class="radio-custom-label">Next Day Delivery<strong> $12.99</strong></label>
            </div>
        </div>
  </form>

Answer 1

因为.input-box元素不是复选框的同级元素。您的选择器是

.checkbox-custom:checked ~.input-box {
  display: none;
}

Answer 2

必须有包装器div来形成要隐藏的元素，然后CSS才能起作用。

{display：none}不能使用复选框吗？

2 个答案: