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

Question

I have two Div section, One Div section contains list of radio button, I want to when i click the radio button, display the data corresponding to radio button on another Div section.

<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

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

Answer 2

In your ajax's success function:

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