Javascript 更改收音机选择上的多个隐藏字段

我的应用程序基于Python 3.4和Flask，但我需要使用JavaScript动态更改隐藏字段的值。我不熟悉JavaScript，也不知道为什么我的代码不能工作

在我的一个模板中，我有一个非常简单的支付表单，允许用户使用单选按钮选择单个信用包（我去掉了CSS和表单操作）：

“price_list.price1”字段是指系统设置的动态价格。这会每小时更改一次，但每个条目都指向给定数量的学分

由于我使用的支付处理器的要求，我需要根据所做的选择更改三个隐藏字段，即item_name、item_description和custom_int1（表示购买的x个信用额度）

我引用了以下答案：

最后我尝试使用jQuery来更改这些值。代码如下：

<script>
$("#amount").change(function () {
    // Get a local reference to the JQuery-wrapped select and hidden field elements:
    var sel = $(this);
    var set_name = $("input[name='item_name']");
    var set_description = $("input[name='item_description']");
    var set_creds = $("input[name='custom_int1']");

    // Get the selected option:
    var opt = sel.children("[value='" + sel.val() + "']:first");

    // Set the values
    if (opt.value=={{ price_list.price1 }}) {
        set_name.value = '1 Credit';
        set_description.value = '1 Credit';
        set_creds.value = 1;
    } else if (opt.value=={{ price_list.price5 }}) {
        set_name.value = '5 Credits';
        set_description.value = '5 Credits';
        document.getElementById('custom_int1').value = 5;
    } else if (opt.value=={{ price_list.price10 }}) {
        set_name.value = '10 Credits';
        set_description.value = '10 Credits';
        set_creds.value = 10;
    } else if (opt.value=={{ price_list.price25 }}) {
        set_name.value = '25 Credit';
        set_description.value = '25 Credit';
        set_creds.value = 25;
    } else if (get_amount.value=={{ price_list.price50 }}) {
        set_name.value = '50 Credits';
        set_description.value = '50 Credits';
        set_creds.value = 50;
    };
});
</script>

$（“#金额”）。更改（函数（）{
//获取JQuery包装选择和隐藏字段元素的本地引用：
var sel=$（本）；
var set_name=$（“输入[name='item_name']）；
var set_description=$（“输入[name='item_description']）；
变量集\u creds=$（“输入[name='custom\u int1']）；
//获取所选选项：
var opt=sel.children（“[value=”+sel.val（）+”]：first”）；
//设置值
如果（opt.value={{price_list.price1}}）{
set_name.value='1学分'；
set_description.value='1学分'；
set_creds.value=1；
}else if（opt.value={{price_list.price5}}）{
set_name.value='5学分'；
set_description.value='5学分'；
document.getElementById（'custom_int1'）。值=5；
}else if（opt.value={{price_list.price10}}）{
set_name.value='10学分'；
set_description.value='10学分'；
set_creds.value=10；
}else if（opt.value={{price_list.price25}}）{
set_name.value='25学分'；
set_description.value='25学分'；
set_creds.value=25；
}else if（get_amount.value={{price_list.price50}）{
set_name.value='50学分'；
set_description.value='50学分'；
set_creds.value=50；
};
});

我在模板底部的

标记前面添加了脚本。

---

该脚本根本无法更改隐藏字段。非常感谢所有帮助。

所有单选按钮都将调用更改事件。要仅获取选中的按钮，请使用：

$("#amount:checked").change(function () {
    //
}

---

对所有已更改的单选按钮调用更改事件。要仅获取选中的按钮，请使用：

$("#amount:checked").change(function () {
    //
}

元素id应是唯一的（金额）。名称可以相同。因此，修复HTML：

修复脚本：

    $(document).ready(function () {  
    $('[type=radio]').click(function () { //click is right event 
        //console.log(this.id);//for test purpose
        var set_name = $("input[name='item_name']");
        var set_description = $("input[name='item_description']");
        var set_creds = $("input[name='custom_int1']");
        switch (this.id) {//"this" is the element clicked
            case 'amount1':
                set_name.val('1 Credit');//not set_name.value='...'
                set_description.val('1 Credit');
                set_creds.val(1);
                break;
            case 'amount2':
                set_name.val('5 Credits');
                set_description.val('5 Credits');
                set_creds.val(5);
                break;
            case 'amount3':
                set_name.val('10 Credits');
                set_description.val('10 Credits');
                set_creds.val(10);
                break;
            case 'amount4':
                set_name.val('25 Credits');
                set_description.val('25 Credits');
                set_creds.val(25);
                break;
            default:
                set_name.val('');
                set_description.val('');
                set_creds.val(0);
                break;
        }

    });
});

`

元素id应是唯一的（金额）。名称可以相同。因此，修复HTML：

修复脚本：

    $(document).ready(function () {  
    $('[type=radio]').click(function () { //click is right event 
        //console.log(this.id);//for test purpose
        var set_name = $("input[name='item_name']");
        var set_description = $("input[name='item_description']");
        var set_creds = $("input[name='custom_int1']");
        switch (this.id) {//"this" is the element clicked
            case 'amount1':
                set_name.val('1 Credit');//not set_name.value='...'
                set_description.val('1 Credit');
                set_creds.val(1);
                break;
            case 'amount2':
                set_name.val('5 Credits');
                set_description.val('5 Credits');
                set_creds.val(5);
                break;
            case 'amount3':
                set_name.val('10 Credits');
                set_description.val('10 Credits');
                set_creds.val(10);
                break;
            case 'amount4':
                set_name.val('25 Credits');
                set_description.val('25 Credits');
                set_creds.val(25);
                break;
            default:
                set_name.val('');
                set_description.val('');
                set_creds.val(0);
                break;
        }

    });
});

`

---

谢谢Alex，这非常有效！我还想补充一点，我需要在脚本运行之前移动它。最初它位于代码的底部，就在

body

标记之前，但我需要将它移到

表单

元素的后面。谢谢Alex，这非常有效！我还想补充一点，我需要在脚本运行之前移动它。最初，它位于代码的底部，就在

body

标记之前，但我需要将它移到

表单

元素之后。