javascript 用文字取代<input text..>-PHP中文网问答

我想通过文字来取代<input text...> 详情如截图。。。
请高手指点。。。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>    
</head>
<body>    
    
<form action="lol.php" method="POST">    
<p id="input_p">

<input type="radio" name="price" value="10" >$10<br>
<input type="radio" name="price" value="20" checked>$20<br>
<input type="radio" name="price" value="30">$30<br><br>
price$<input type="text" id="it" value=""><br><br>

quantity<button type="button" id="moins" onclick="minus()">-</button>
<input type="number" name="quantity" value="1" id="count">
<button type="button" id="moins" onclick="plus()">+</button><br><br>

Total <input type="text" value="" name="sub_total" id="total">

</p>

<button type="submit">GOGOGO</button>
    
</form>

<script>
$(document).ready(function() {
$('#it').val($('input[checked]').val());
$('#total').val($('input[checked]').val());

$('input[type=radio]').click(function() {
    $('#it').val(this.value);
    $('#total').val($('#it').val()* count);
});
});

    var price = document.getElementById('it');
    var count = 1;
    var total =0;
    var countEl = document.getElementById("count");
    var countEl1 = document.getElementById("total");

    function plus(){
        count++;
        total=price.value*count;
        countEl.value = count;
        countEl1.value = total;
        
    }
    function minus(){
      if (count > 1) {
        count--;
        total=price.value*count;
        countEl.value = count;
        countEl1.value = total;
      }  
    }

</script>
</body>
</html>

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </head> <body> <form action="lol.php" method="POST"> <p id="input_p"> <input type="radio" name="price" value="10" >$10<br> <input type="radio" name="price" value="20" checked>$20<br> <input type="radio" name="price" value="30">$30<br><br> price$<input type="textbox" class="textbox mleft" readonly id="it" value="" ><br><br> quantity<button type="button" id="moins" onclick="minus()">-</button> <input type="textbox" class="textbox mcenter" readonly value="1" id="count"> <button type="button" id="moins" onclick="plus()">+</button><br><br> Total <input type="textbox" class="textbox mleft" readonly value="" name="sub_total" id="total"> </p> <button type="submit">GOGOGO</button> </form> <script> $(document).ready(function() { $('#it').val($('input[checked]').val()); $('#total').val($('input[checked]').val()); $('input[type=radio]').click(function() { $('#it').val(this.value); $('#total').val($('#it').val()* count); }); }); var price = document.getElementById('it'); var count = 1; var total =0; var countEl = document.getElementById("count"); var countEl1 = document.getElementById("total"); function plus(){ count++; total=price.value*count; countEl.value = count; countEl1.value = total; } function minus(){ if (count > 1) { count--; total=price.value*count; countEl.value = count; countEl1.value = total; } } </script> </body> </html>

.textbox { margin-top: 2px; border: none;/*去除边框，这样显示就像普通文字一样*/ height: 25px;/*根据需要设置高度*/ width: 275px;/*根据需要设置宽度*/ background-color: #7a7a7a;/*注意，这里颜色要和底色一致*/ color:#fff;/*注意，这里颜色要和文字色一致*/ } .mcenter{ text-align: center; } .mleft{ text-align: left; }