单选按钮像dropDown一样工作（选择选项）

Question

我的Javascript代码可以使用select选项，但是我希望它可以使用单选按钮

首先，我在这里写下所有代码

计算器Javascript：

$(function(){

calc();

$("#calculator").on('change', calc);
$('#amount').bind('change keyup', calc).on('keypress', isNumberKey);
});
function isNumberKey(evt) {
var charCode = (evt.which) ? evt.which : event.keyCode;
if (charCode > 31 && (charCode < 45 || charCode > 57))
    return false;
return true;
}

function calc() {

var plan = $("#calculator").val();
var amount = $('#amount').val();
var percent;

switch (plan) {
    case '1':
        switch (true) {
            case (amount<25):
                percent = 0;
                break;
            case (amount<=500):
                percent = 102.5;
                break;
            case (amount<=1000):
                percent = 103;
                break;
            case (amount>=10000):
                percent = 120;
                break;
            case (amount>=100001):
                percent = 0;
                break;
           default:
                percent = 0;
        }
        break;

    case '2':
        switch (true) {
            case (amount<25):
                percent = 0;
                break;
            case (amount<=1000):
                percent = 114;
                break;
            case (amount<=2000):
                percent = 118;
                break;
            case (amount<=5000):
                percent = 124;
                break;
            case (amount<=10000):
                percent = 140;
                break;
            case (amount<=20000):
                percent = 170;
                break;
            case (amount<=100000):
                percent = 220;
                break;
           default:
                percent = 0;
        }
        break;

}

$('#assign_per').val(percent+'%');
var total = amount*percent/100;
$('#total_return').val('$'+total.toFixed(2));

if(total <= 0){
    $('#net_price').val('0.00');
}else{
    $('#net_price').val('$'+(total-amount).toFixed(2));
}

}

和HTML代码：

                <select id="calculator">
                   <option value="1">Price One</option>
                   <option value="2">Price Two</option>
                </select> 

                <input id="amount" value="100" type="text" name="text">
                <input id="net_price" type="text" name="text" readonly>
                <input id="total_price" type="text" name="text" readonly>

通过选择选项，此代码可以完美运行，但我需要单选按钮。 在选择中，我有 ID：calculator 和选项中的值 我如何将其转换为带有标签的单选按钮？

Answer 1

这是您的单选按钮的HTML代码：

=IF(C3=C2,D2,D2+1)

您需要在javascript代码上进行更改的唯一方法是从选定的收音机中获取值，传递收音机的名称及其形式的方式：

<form id="calculator">
  <input type='radio' name='pricePlan' value='1' checked>Price One <br>
  <input type='radio' name='pricePlan' value='2'> Price Two <br>
</form>

另外，在您的JS上，您用错误的ID引用了第三个输入var plan = $('input[name=pricePlan]:checked', '#calculator').val() ，它应该是：

total_price

这是完整的工作代码

$('#total_price').val('$'+total.toFixed(2));

$(function () {

	calc();

	$("#calculator").on('change', calc);
	$('#amount').bind('change keyup', calc).on('keypress', isNumberKey);
});
function isNumberKey(evt) {
	var charCode = (evt.which) ? evt.which : event.keyCode;
	if (charCode > 31 && (charCode < 45 || charCode > 57))
		return false;
	return true;
}

function calc() {

	var plan = $('input[name=pricePlan]:checked', '#calculator').val()
	var amount = $('#amount').val();
	var percent;

	switch (plan) {
		case '1':
			switch (true) {
				case (amount < 25):
					percent = 0;
					break;
				case (amount <= 500):
					percent = 102.5;
					break;
				case (amount <= 1000):
					percent = 103;
					break;
				case (amount >= 10000):
					percent = 120;
					break;
				case (amount >= 100001):
					percent = 0;
					break;
				default:
					percent = 0;
			}
			break;

		case '2':
			switch (true) {
				case (amount < 25):
					percent = 0;
					break;
				case (amount <= 1000):
					percent = 114;
					break;
				case (amount <= 2000):
					percent = 118;
					break;
				case (amount <= 5000):
					percent = 124;
					break;
				case (amount <= 10000):
					percent = 140;
					break;
				case (amount <= 20000):
					percent = 170;
					break;
				case (amount <= 100000):
					percent = 220;
					break;
				default:
					percent = 0;
			}
			break;

	}

	$('#assign_per').val(percent + '%');
	var total = amount * percent / 100;
	$('#total_price').val('$' + total.toFixed(2));

	if (total <= 0) {
		$('#net_price').val('0.00');
	} else {
		$('#net_price').val('$' + (total - amount).toFixed(2));
	}

}