Django ChoiceField RadioSelect 表单中的小部件，测试模板中选择的元素

Question

我在ChoiceField中有2个无线电按钮，我想显示模板的某些部分，根据女巫无线电按钮。

以下：

• form.py

  class ctdform（forms.form）：
    stolopt_name = forms.charfield（max_length = 100）
    rb = forms.booleanfield（必需= false，label ='rb'）
    mr = forms.booleanfield（必需= false，label ='mr'）
    选择= [（'rb'，'rb'），（'Mr'，'Mr'）]
    Analyse_Type = forms.choicefield（选择=选择，窗口= forms.radioselect）
 

• 模板html

  ...  
{{form.analyse_type}}  
在这里，我想测试选择哪个按钮，并根据选择的方式显示模板 
类似：{％如果form.analyse_type。 == true％} 
...
 

我用form.analyse_type来测试很多语法。像form.analyse_type.field.widget.Choices一样，可以在循环中具有每个选择。 ，但是我没有找到正确的人返回选定的radiobutton ...

也许这种方式不是做我想做的正确的人。

如果您有任何想法，解决方案谢谢;）

用户2497126 编辑 感谢所有提示:)！

我有一个错误未发现的错误：get_lements： - ＆gt;表格[data-sb-form-api-toke]似乎与对象分析符合链接

，按照html元素进行打印屏幕。我疲倦了不同的综合

让radiovalue = $（“输入[name ='Analyse_type']：checked”）。value（）;

我还将我的HTML代码放在

{% extends "index.html" %}

{% load static %}
{% block content %}
<div style="padding-left: 30%;" class="col-lg-6 col-xl-6"
    <h2 class="h4 fw-bolder">
        Analyse Type
    </h2>
    <br>
        {{ form.analyse_type }}
    <br> </div> 
    <div id="template-one" style="display:none;">
       <div style="padding-right: 30%;" class="col-lg-6 col-xl-6">
        <h2 class="h4 fw-bolder">
            TEST
        </h2> 
     </div>  
  </div> 
 {% endblock %}

{% block javascript %}  
  <script type="text/javascript">
        $(document).ready(function () {
            $(".custom-control-input").change(function () {
                let radioValue = $("input[name='analyse_type']:checked").value();
                let templateOne = document.getElementById('template-one')
                if (radioValue == "rb") {
                    $("#template-one").show();
                } else {
                    $("#template-one").hide();
                }
            });
        });

    </script>


{% endblock javascript %}

edit

的情况下，如果我做了

console.log（$（“输入[name ='Analyse_type']：checked”）。val（））

在Chrome的调试器中我有RB的返回。 但是错误仍然没有结果。 我还更改了html，将模板一个包含在表单的同一div中，就像你的示例一样 问题似乎在这里

$（“。自定义控制输入”）。更改（function（）{

i替换.custom或select或根据一些论坛答案选择＃id_analyse_type，但是我没有结果

感谢您的时间和您的帮助:)

< em> 编辑

在这里解决方案：

{% block javascript %}
    <script type="text/javascript">
        $(document).ready(function () {
            let radioValue = $("input[name='analyse_type']:checked").val();
                if (radioValue == "rb") {
                    $("#template-one").show();
                } else {
                    $("#template-one").hide();
                }
            $('#id_analyse_type').change(function () {
                let radioValue = $("input[name='analyse_type']:checked").val();
                if (radioValue == "rb") {
                    $("#template-one").show();
                } else {
                    $("#template-one").hide();
                }
            });
        });

    </script>
{% endblock javascript %}

谢谢您的帮助！

Answer 1

这是我试图适应

更改功能的问题的编辑答案（即选择无线电时）检查并用无线电输入中的值替换类值。另外，请确保您在实例化变量radiovalue时提供正确的名称，我使用“ Analyze_Type”来示例，但请检查并确认无线电输入的正确名称值。

您可以在模板中使用这样的JS实现它

{% extends "base.html" %}

{% block title %}Form title{% endblock title %}


{% block content %}

<!-- page content -->

                    <div class="x_content">
                        {{ form.analyse_type}}
                        <div id="template-one" style="display:none;">
                            Template one
                        </div>
                        <div id="template-two" style="display:none;">
                            Template two
                        </div>

                    </div>
<!-- /page content -->
{% endblock %}

{% block javascript %}
    <script>
        $(document).ready(function(){
            $(".custom-control-input").change(function(){
                let radioValue = $("input[name='analyse_type']:checked").val();
                let templateOne = document.getElementById('template-one')
                if(radioValue == "RB"){
                    $("#template-one").show();
                    $("#template-two").hide();
                }
                else {
                    $("#template-two").show();
                    $("#template-one").hide();
                }
            });     
        });
        
    </script>
{% endblock javascript %}