Utiliser augmentation/diminution avec l'entrée radio

Question

Je veux:

• Pousser les boutons haut/bas dans la grande entrée devrait augmenter/diminuer la valeur.
• Lorsque les boutons radio en dessous du prix sont cliqués, le prix doit être remplacé par la valeur sélectionnée.

.priceBlock { 
 
    width: 80%; 
 
    border-radius: 4px; 
 
    background-color: white; 
 
    text-align: center; 
 
    box-shadow: 0px 0 40px 1px grey; 
 
    -moz-box-shadow: 0px 0 40px 1px grey; 
 
    -webkit-box-shadow: 0px 0 40px 1px grey; 
 
} 
 

 
.priceHeader { 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 
    background-color: #f7963b; 
 
    padding: 20px; 
 
    color: white; 
 
    border-top-left-radius: 4px; 
 
    border-top-right-radius: 4px; 
 
} 
 

 
.priceContent { 
 
    padding: 0 15px; 
 
} 
 

 
.priceContent form>p { 
 
    line-height: 3; 
 
    font-size: 12px; 
 
} 
 

 
.priceContent input[type=radio] { 
 
    display: none; 
 
} 
 

 
.priceContent label { 
 
    cursor: pointer; 
 
    color: #0a1612; 
 
    font-size: 16px; 
 
    margin-right: 15px; 
 
} 
 

 
.priceContent label:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.priceContent label span { 
 
    display: inline-block; 
 
} 
 

 
.priceContent label .radio { 
 
    background-color: white; 
 
    border: 1px solid #ccced3; 
 
    width: 12px; 
 
    height: 12px; 
 
    margin: 0; 
 
    border-radius: 100%; 
 
    position: relative; 
 
} 
 

 
.priceContent label .radioer { 
 
    position: absolute; 
 
    display: none; 
 
    width: 8px; 
 
    height: 8px; 
 
    border-radius: 100%; 
 
    background-color: #f7963b; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.labels { 
 
    text-transform: uppercase; 
 
} 
 

 
.changer { 
 
    position: relative; 
 
} 
 

 
.changer input { 
 
    text-align: center; 
 
    border: 1px solid #ddd; 
 
    width: 100%; 
 
    outline: none; 
 
    padding: 15px; 
 
    border-radius: 4px; 
 
} 
 

 
.changer .upDown { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    border-left: 1px solid #ddd; 
 
} 
 

 
.upDown>div { 
 
    padding: 5px 15px; 
 
    background-color: #ddd; 
 
    cursor: pointer; 
 
} 
 

 
.upDown>div:hover { 
 
    background-color: #bbb; 
 
} 
 

 
.upDown .up { 
 
    border-top-right-radius: 4px; 
 
} 
 

 
.upDown .down { 
 
    border-bottom-right-radius: 4px; 
 
} 
 

 
.line { 
 
    border-bottom: 1px solid #ddd; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flex; 
 
    display: -o-flex; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    -ms-align-items: center; 
 
    align-items: center; 
 
    padding: 20px 0; 
 
} 
 

 
.priceContent button { 
 
    background-color: #f7963b; 
 
    color: white; 
 
    border: none; 
 
    margin: 20px 0; 
 
    padding: 15px; 
 
    min-width: 130px; 
 
    border-radius: 4px; 
 
} 
 

 
.resultPrice { 
 
    text-transform: uppercase; 
 
    padding: 20px 0; 
 
} 
 

 
.resultPrice sup { 
 
    font-size: 22px; 
 
    margin-right: 5px; 
 
} 
 

 
.resultPrice { 
 
    font-size: 40px; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-6"> 
 
    <div class="priceBlock"> 
 
    <h4 class="priceHeader">36-month plan</h4> 
 
    <div class="priceContent"> 
 
     <form action=""> 
 
     <h6 class="resultPrice"><sup>usd</sup><span>34.00</span></h6> 
 
     <div class="labels"> 
 
      <label for="btc" class="btc"> 
 
      <span class="radio"> 
 
       <span class="radioer"></span> 
 
      </span> 
 
      <span class="valName">btc</span> 
 
      <span class="cost">0.00648583</span> 
 
      </label> 
 
      <label for="usd" class="usd"> 
 
      <span class="radio"> 
 
       <span class="radioer"></span> 
 
      </span> 
 
      <span class="valName">usd</span> 
 
      <span class="cost">34.00</span> 
 
      </label> 
 
      <label for="eur" class="eur"> 
 
      <span class="radio"> 
 
       <span class="radioer"></span> 
 
      </span> 
 
      <span class="valName">eur</span> 
 
      <span class="cost">28.50</span> 
 
      </label> 
 
      <input id="btc" type="radio" name="radAnswer" class="radAnswer"> 
 
      <input id="usd" type="radio" name="radAnswer" class="radAnswer"> 
 
      <input id="eur" type="radio" name="radAnswer" class="radAnswer"> 
 
     </div> 
 
     <p>one time payment</p> 
 
     <div class="changer"> 
 
      <input type="text" value="100 GH/s"> 
 
      <div class="upDown"> 
 
      <div class="up"><i class="fa fa-caret-up" aria-hidden="true"></i></div> 
 
      <div class="down"><i class="fa fa-caret-down" aria-hidden="true"></i></div> 
 
      </div> 
 
     </div> 
 
     <div class="lines"> 
 
      <div class="line"> 
 
      <p>Maintenance</p> 
 
      <p>$0.00033 per GH/s per day</p> 
 
      </div> 
 
      <div class="line"> 
 
      <p>Amount of hosts</p> 
 
      <p class="amountOfHosts">1</p> 
 
      </div> 
 
      <div class="line"> 
 
      <p>Delivery Date</p> 
 
      <p>Instantly</p> 
 
      </div> 
 
      <div class="line"> 
 
      <p>Duration</p> 
 
      <p>36 months</p> 
 
      </div> 
 
     </div> 
 
     <button type="submit">Buy</button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Beaucoup de solutions possibles. J'ai essayé de garder le balisage HTML tel quel mais j'ai dû faire un changement mineur.

Certains sélecteurs id supplémentaires pourraient également être utiles, mais comme je l'ai dit, j'ai essayé de conserver le balisage tel quel.

$(document).ready(function() { 
 
    var $speed = $('#speed'); 
 

 
    var $currencies = $('input[name="radAnswer"]'); 
 
    $currencies.on('click', function(event) { 
 
    var $parent = $(this).parent(); 
 
    var currency = $('.valName' ,$parent).text(); 
 
    var amount = $('.cost' ,$parent).text(); 
 
    
 
    $('.resultPrice sup').text(currency); 
 
    $('.resultPrice span').text(amount); 
 
    }); 
 

 

 
    // Increase amount 
 
    $('.up').on('click', function() { 
 
    $speed.val(Number.parseInt($speed.val()) + 10 + ' GH/s'); 
 
    }); 
 

 
    // Decrease amount 
 
    $('.down').on('click', function() { 
 
    $speed.val(Number.parseInt($speed.val()) - 10 + ' GH/s'); 
 
    }); 
 
})

.priceBlock { 
 
    width: 80%; 
 
    border-radius: 4px; 
 
    background-color: white; 
 
    text-align: center; 
 
    box-shadow: 0px 0 40px 1px grey; 
 
    -moz-box-shadow: 0px 0 40px 1px grey; 
 
    -webkit-box-shadow: 0px 0 40px 1px grey; 
 
} 
 

 
.priceHeader { 
 
    text-transform: uppercase; 
 
    font-size: 20px; 
 
    background-color: #f7963b; 
 
    padding: 20px; 
 
    color: white; 
 
    border-top-left-radius: 4px; 
 
    border-top-right-radius: 4px; 
 
} 
 

 
.priceContent { 
 
    padding: 0 15px; 
 
} 
 

 
.priceContent form>p { 
 
    line-height: 3; 
 
    font-size: 12px; 
 
} 
 

 
.priceContent input[type=radio] { 
 
    display: none; 
 
} 
 

 
.priceContent label { 
 
    cursor: pointer; 
 
    color: #0a1612; 
 
    font-size: 16px; 
 
    margin-right: 15px; 
 
} 
 

 
.priceContent label:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.priceContent label span { 
 
    display: inline-block; 
 
} 
 

 
.priceContent label .radio { 
 
    background-color: white; 
 
    border: 1px solid #ccced3; 
 
    width: 12px; 
 
    height: 12px; 
 
    margin: 0; 
 
    border-radius: 100%; 
 
    position: relative; 
 
} 
 

 
.priceContent label .radioer { 
 
    position: absolute; 
 
    display: none; 
 
    width: 8px; 
 
    height: 8px; 
 
    border-radius: 100%; 
 
    background-color: #f7963b; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
.labels { 
 
    text-transform: uppercase; 
 
} 
 

 
.changer { 
 
    position: relative; 
 
} 
 

 
.changer input { 
 
    text-align: center; 
 
    border: 1px solid #ddd; 
 
    width: 100%; 
 
    outline: none; 
 
    padding: 15px; 
 
    border-radius: 4px; 
 
} 
 

 
.changer .upDown { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    border-left: 1px solid #ddd; 
 
} 
 

 
.upDown>div { 
 
    padding: 5px 15px; 
 
    background-color: #ddd; 
 
    cursor: pointer; 
 
} 
 

 
.upDown>div:hover { 
 
    background-color: #bbb; 
 
} 
 

 
.upDown .up { 
 
    border-top-right-radius: 4px; 
 
} 
 

 
.upDown .down { 
 
    border-bottom-right-radius: 4px; 
 
} 
 

 
.line { 
 
    border-bottom: 1px solid #ddd; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flex; 
 
    display: -o-flex; 
 
    display: flex; 
 
    justify-content: space-between; 
 
    -ms-align-items: center; 
 
    align-items: center; 
 
    padding: 20px 0; 
 
} 
 

 
.priceContent button { 
 
    background-color: #f7963b; 
 
    color: white; 
 
    border: none; 
 
    margin: 20px 0; 
 
    padding: 15px; 
 
    min-width: 130px; 
 
    border-radius: 4px; 
 
} 
 

 
.resultPrice { 
 
    text-transform: uppercase; 
 
    padding: 20px 0; 
 
} 
 

 
.resultPrice sup { 
 
    font-size: 22px; 
 
    margin-right: 5px; 
 
} 
 

 
.resultPrice { 
 
    font-size: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-6"> 
 
    <div class="priceBlock"> 
 
    <h4 class="priceHeader">36-month plan</h4> 
 
    <div class="priceContent"> 
 
     <form action=""> 
 
     <h6 class="resultPrice"><sup>usd</sup><span>34.00</span></h6> 
 
     <div class="labels"> 
 
      <label for="btc" class="btc"> 
 
      <span class="radio"> 
 
       <span class="radioer"></span> 
 
      </span> 
 
      <span class="valName">btc</span> 
 
      <span class="cost">0.00648583</span> 
 
      <input id="btc" type="radio" name="radAnswer" class="radAnswer"> 
 
      </label> 
 
      <label for="usd" class="usd"> 
 
      <span class="radio"> 
 
       <span class="radioer"></span> 
 
      </span> 
 
      <span class="valName">usd</span> 
 
      <span class="cost">34.00</span> 
 
      <input id="usd" type="radio" name="radAnswer" class="radAnswer"> 
 
      </label> 
 
      <label for="eur" class="eur"> 
 
      <span class="radio"> 
 
       <span class="radioer"></span> 
 
      </span> 
 
      <span class="valName">eur</span> 
 
      <span class="cost">28.50</span> 
 
      <input id="eur" type="radio" name="radAnswer" class="radAnswer"> 
 
      </label> 
 
     </div> 
 
     <p>one time payment</p> 
 
     <div class="changer"> 
 
      <input type="text" id="speed" value="100 GH/s"> 
 
      <div class="upDown"> 
 
      <div class="up"><i class="fa fa-caret-up" aria-hidden="true"></i></div> 
 
      <div class="down"><i class="fa fa-caret-down" aria-hidden="true"></i></div> 
 
      </div> 
 
     </div> 
 
     <div class="lines"> 
 
      <div class="line"> 
 
      <p>Maintenance</p> 
 
      <p>$0.00033 per GH/s per day</p> 
 
      </div> 
 
      <div class="line"> 
 
      <p>Amount of hosts</p> 
 
      <p class="amountOfHosts">1</p> 
 
      </div> 
 
      <div class="line"> 
 
      <p>Delivery Date</p> 
 
      <p>Instantly</p> 
 
      </div> 
 
      <div class="line"> 
 
      <p>Duration</p> 
 
      <p>36 months</p> 
 
      </div> 
 
     </div> 
 
     <button type="submit">Buy</button> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div>