Question

我正在尝试根据选择的收音机来改变输入的ID。

<input type="text" name="judge"/>

<input type="radio" name="type" value="percent"/>Percent |
<input type="radio" name="type" value="decimal"/>Decimal
<br/>
<button type="button" id="mybutton">Check</button>
<br/><br/>
<div id="output"/>

单击单选按钮百分比或小数将更改输入框的ID。

//Set the ID of the input box on radio change
$('input[name=type]').change(function() {
    if ($(this).val() == "percent") {
        $('input[name=judge]').attr('id', 'judge_percent');
    } else if ($(this).val() == "decimal") {
        $('input[name=judge]').attr('id', 'judge_decimal');
    }
});

//IF statement depending on the input ID created from the radio button
$('#mybutton').click(function() {
    if ($('input[name=type]').val() == "percent") {
        value_percent = parseFloat($('#judge_percent').val());
        $('#output').html(value_percent);
    } else if ($('input[name=type]').val() == "decimal") {
        value_decimal = parseFloat($('#judge_decimal').val());
        $('#output').html(value_decimal);
    }
});

这只适用于中途。如果我检查'十进制'并单击我的按钮，我会得到'NaN'，好像它没有读取输入ID。

编辑：这是正确的 Jsfiddle：http://jsfiddle.net/6FbdJ/1/

Answer 1

} else($('input[name=type]').val() == "decimal") {

应该是：

} else if($('input[name=type]').val() == "decimal") {

这是你在DEMO中得到的。

<强>更新

从以下位置更改选择器：

$('input[name=type]').val();

要：

$('input[name=type]:checked').val();

Fixed DEMO

您可以将$(this).val()替换为this.value。

Answer 2

更好的方法是为此创建一个闭包，在其中保持状态以做出决定：

(function() {
    var inputField = $('input[name=judge]'), // keep reference to the text input field
    inputType = 'percent', // set default input type to percentage
    outputBox = $('#output'); // keep reference of the output area

    $('input[name=type]').change(function() {
        // change the input type based on the value (verbatim copy)
        inputType = $(this).val();
    });

    $('#mybutton').click(function() {
        var tmp;

        if (inputType == 'percent') {
            tmp = parseFloat(inputField.val()) / 100; // make a percentage
        } else if (inputType ='decimal') {
            tmp = parseFloat(inputField.val()); // don't change anything
        }
        outputBox.text(tmp); // output the calculated value
    });
}());

它将选定的输入类型保存在局部变量中，并根据单选按钮进行更改;单击该按钮时，它将检查该局部变量并根据该值做出决定。

Answer 3

$('#mybutton').click(function() {
    if ($('input[name=type]:checked').val() == "percent") {
        value_percent = parseFloat($('#judge_percent').val() || 0);
        $('#output').html(value_percent);
    } else if ($('input[name=type]:checked').val() == "decimal") {
        value_decimal = parseFloat($('#judge_decimal').val() || 0);
        $('#output').html(value_decimal);
    }
});

基于单选按钮的JQuery动态输入ID

3 个答案: