javascript - 如何根据表单中先前选中的复选框获取单选复选框列表？

Question

我在根据此表单上一页上的选中复选框在表单中获取有限的单选复选框列表时遇到问题。有一个关系 M2M 类别 <--> 组织。所以检查几个类别，我想得到这些类别所属的所有组织的列表。单选框列表是用 ajax 加载的。我知道我应该以某种方式通过选中复选框的值进行过滤，但不知道该怎么做。下面 html 中的注释代码显示了它的外观。首先它是静态的。

here is the part with checkboxes:
<div class="form--steps-container">
        <div class="form--steps-counter">Krok <span>1</span>/5</div>

        <form action="form-confirmation.html" method="post">
            {% csrf_token %}
          <!-- STEP 1: class .active is switching steps -->
          <div data-step="1" class="active">
            <h3>Zaznacz co chcesz oddać:</h3>
            {% for category in categories %}
            <div class="form-group form-group--checkbox">
              <label>
                <input
                  type="checkbox"
                  name="categories"
                  class = "checkbox"
                  value={{ category.id }}
                />
                <span class="checkbox"></span>
                <span class="description" id = "opis"
                  >{{ category.name}}</span
                >
              </label>
            </div>
              {% endfor %}

here is the part with radio checkboxes loaded with ajax:

<!-- STEP 4 -->
          <div data-step="3" id = 'steps'>
            <h3>Wybierz organizacje, której chcesz pomóc:</h3>
            <!--
            <div class="form-group form-group--checkbox">
              <label>
                <input type="radio" name="organization" value="old" />
                <span class="checkbox radio"></span>
                <span class="description" id = "span">
                  <div class="title" id ="name">Fundacja “Bez domu”&lt;/div>
                  <div class="subtitle" id = "description">
                    Cel i misja: Pomoc dla osób nie posiadających miejsca
                    zamieszkania
                  </div>
                </span>
              </label>enter code here
            </div>

            <div class="form-group form-group--checkbox" id = "changelist-form">
              <label>
                <input type="radio" name="organization" value="old" />
                <span class="checkbox radio"></span>
                <span class="description">
                  <div class="title">Fundacja “Dla dzieci"</div>
                  <div class="subtitle">
                    Cel i misja: Pomoc osobom znajdującym się w trudnej sytuacji
                    życiowej.
                  </div>
                </span>
              </label>
            </div>
            -->

            <div class="form-group form-group--buttons" id = "guzik">
              <button type="button" class="btn prev-step">Wstecz</button>
              <button type="button" class="btn next-step">Dalej</button>
            </div>
          </div>

app.js - here with ajax I have loaded a list of all organizations, which should be filtered by value of checked checkboxes. However I tried several times and can't get the expected result

$(document).ready(function()
 {
  $.ajax({
    url:"http://127.0.0.1:8000/institution/",
    dataType: "json",
    success: function(data)
    {
      for (let i =0; i<data.length; i++)
      {
        console.log(data[i].categories)
        //var check = data[i].categories
        //for (let i=0; i<check.length; i++){
            //console.log(check[i])
        //}
        //if(check[i] == )
        //console.log("stop")
        //console.log(data[i].categories)
        //console.log(check[1])
        //console.log(data[i].categories.length)
          var rows = $('<div class="form-group form-group--checkbox">\n' +
          '              <label>\n' +
          '                <input type="radio" name="organization" value="old" />\n' +
          '                <span class="checkbox radio"></span>\n' +
          '                <span class="description" id = "span">\n' +
          '                  <div class="title" id ="name">' + data[i].name + '</div>\n' +
          '                  <div class="subtitle" id = "description">' + data[i].description + '</div>\n' +
          '              </label>\n' +          '                </span>\n' +

          '            </div>');
          $(rows).insertBefore("#guzik");
    }
  }
  });
 });

标签： javascripthtmljqueryformsdjango-rest-framework