在Djang中单击单选按钮后，如何在同一页面上显示数据

Question

我有两个Div部分，一个Div部分包含单选按钮列表，我想当我单击单选按钮时，在另一个Div部分显示对应于单选按钮的数据。在

<div class="card-body ">
  <form id="ShowAvailableDataFiles" method="post">
    {% csrf_token %}
    {% for post in posts %}
      <input type="radio" id="showavailabledataid" name="datafilesname" value='{{ post }}'
             onclick="ShowAvailableDataFiles()"> {{ post }} <br>
    {% endfor %}
  </form>
</div>

<div id='show-me'>
{% for data in datas %}
    {{data}}
{% endfor %}
</div>

<script>
  function ShowAvailableDataFiles() {
    $('#showavailabledataid').on('click', function () {
      var radioValue = $("input[name='showavailabledataname']:checked").val();
      console.log("You clicked radio button")
    });
    $.ajax({
      url: "/analytics/datafile_name/",
      type: "POST",
      data: {
        datafiles: $("input[name='showavailabledataname']:checked").val(),
        csrfmiddlewaretoken: $('input[name=csrfmiddlewaretoken]').val()

      },
      success: function (data) {
        console.log("=========")

      }
    });
  }
</script>

Answer 1

在ajax的success函数中：

success: function (data) {
        html_code = "<input type='checkbox' id='filesid' name = 'filesname' value='"+data+"'>"+data+"<br>"
        $('#show-me').html(html_code);
}

Answer 2

$('#showavailabledataid').on('click', function() {
    const val = $('input[type="radio"]:checked').val();
    $('#show-me').text(val);
});