javascript - 选中复选框时如何向上移动一个部分？

标签 javascript html css checkbox

我想知道如何在选中“与送货地址相同”复选框时将“送货方式”部分向上移动？目前，当选中该框时，有一大片空白区域，我想知道如何解决这个问题。取消选中该框时，隐藏的表单会弹出并填充空白区域，以便该部分正常运行。提前致谢!

.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 {
  visibility: hidden;
  opacity: 0;
}

.radioalign {
  margin: 0 auto;
  width: auto;
  text-align: left;
  display: table;
}
  <form class="form1">
      
      <div class="h6centeralign"><h6 class="h6style">Shipping Address</h6></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="form2">
  
      <div class="h6centeralign"><h6 class="h6style">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 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>

最佳答案

使用 display:none; 代替 visibility: hidden; 和 不透明度:0;

为什么？

see here 

.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;
}

.radioalign {
  margin: 0 auto;
  width: auto;
  text-align: left;
  display: table;
}
  <form class="form1">
      
      <div class="h6centeralign"><h6 class="h6style">Shipping Address</h6></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="form2">
  
      <div class="h6centeralign"><h6 class="h6style">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 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>

关于javascript - 选中复选框时如何向上移动一个部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53606325/

上一篇：javascript - AngularJS Protractor : randomly fail in headless mode (Firefox)

下一篇：javascript - 虚拟数据库，导出多个默认值

相关文章：

javascript - var 名称之间的区别；且变量名称 = 0；

javascript - jQuery DataTable fnDestroy 重新格式化表

javascript - 为什么 Chrome 和 Firefox 呈现的 bootstrap CSS 与 Safari 不同

javascript - 更改选择选项的表单操作

javascript - 如何在 HTML canvas 中获取正确的鼠标坐标

javascript - 对原型(prototype)类使用对象字面量

javascript - react-native 中的 Node 模块

javascript - 如何通过单击按钮打开 Accordion 菜单？

html - Bootstrap 3表单和表单最后一行背景颜色

JavaScript(远程包含): HTML Elements creation on-the-fly?

©2024 IT工具网  联系我们