使用增加/减少无线电输入

Question

I want to:

• Pushing the up/down buttons in the large input should increase/decrease the value.
• When the radio buttons below the price is clicked the price should be replaced with the selected value.

 .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

Lots of potential solutions. I tried to keep the HTML markup as is but had to make a minor change.

Some additional id selectors might also be helpful, but as I said I tried to keep the markup as is.

 $(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>