Django的酥脆形式 - 利用无线电按钮隐藏/显示等领域(Django crispy form -

请我有一个关于创建使用Django的脆皮形式的形式问题。我希望有具有2个字段的表单和第一场的生皮的选择/显示第二个。

第一字段：单选按钮<=此选项隐藏/显示第二个字段。
第二场：浮动场

我已经试过是：

给ID以单选按钮，把第2场进一个div
单击根据分配的ID的单选按钮时运行JS功能。
在JS功能，得到了单选按钮的值
基于价值，隐藏/显示含有第二场股利。

但在第3步，我总是得到“未定义值”。我想这是因为我不能给ID来选择/选项，但只对那些没有价值了整个单选按钮。但是，这只是我的猜测。请参考我的简单的代码，我会很感激，如果有人可以帮助我。

非常感谢！！！

forms.py

from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Fieldset, ButtonHolder, Submit
from crispy_forms.bootstrap import InlineRadios,PrependedAppendedText,Div

class my_form(forms.Form):
    # Radio button field
    cargo = forms.ChoiceField(label='Cargo on Deck',
                              choices=[('true','Yes'),
                                       ('false','No')],
                              initial='false')
    # the 2nd field
    L = forms.DecimalField(label='Length: L [m]')

    ### Render form
    def __init__(self, *args, **kwargs):
        super(my_form, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_id = 'my_form_id'
        self.helper.form_class = 'blueForms'
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', 'Calculate'))

        self.helper.form_class = 'form-horizontal'
        self.helper.label_class = 'col-lg-4'
        self.helper.field_class = 'col-lg-8'

        # step 1: Assign id to radio, put 2nd field in a div
        self.helper.layout = Layout(
            InlineRadios('cargo',id="radio_id"),
            Div('L', css_id="div_id"),
        )

HTML

 <!-- Html --> {% extends 'home/home_base.html' %} {% block content %} <div class="row"> <div class="col-sm-6"> <!-- {% csrf_token %}--> {% load crispy_forms_tags %} {% crispy my_form my_form.helper %} </div> </div> <!-- JS --> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> // step 2: run function when clicking radio button $(document).ready(function() { $('#radio_id').on('change',function(){ // step 3: get selected value var selected_value = $('input[id="radio_id"]:checked').val(); alert(selected_value); // somehow this always gives "undefined value" // step 4: hide/show dive based on selected_value if( $(this).val()=="true"){ $("#div_id").hide() } else{ $("#div_id").show() } }); }); </script> {% endblock %}

步骤3在HTML文件中，尝试使用：

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