javascript - JavaScript不读取多选文本

我想捕获表单的值以在某些函数中对其进行详细说明，然后再将其记录在数据库中。我想我应该使用JavaScript，所以我们在这里：

我的模特：

class Region(models.Model):
    number = models.CommaSeparatedIntegerField(max_length=9, unique=True)
    city = models.OneToOneField(Community, blank= True, null=True)
    resources = models.ManyToManyField(Resource, blank=True)

我的表格：

class Crea_RegionForm(forms.ModelForm):
    quantity = forms.IntegerField(initial=1)
    resources=MyModelMultipleChoiceField(Resource.objects.all(),
        widget=forms.CheckboxSelectMultiple, label='Risorse')

    class Meta:
        model = Region
        fields = ('number', 'city', 'resources')

    def __init__(self, *args, **kwargs):
        super(Crea_RegionForm, self).__init__(*args, **kwargs)
        quantity = self.fields['quantity'] #costum field

我的MyModelMultipleChoiceField：

class MyModelMultipleChoiceField(forms.ModelMultipleChoiceField):
    def label_from_instance(self, obj):
        return format_html(
            '<span style="font-weight:normal">{}</span>', obj.name)

因此，我页面中的html资源：

Risorse
<ul id="id_resources">
    <li>
        <label for="id_resources_0">
            <input id="id_resources_0" name="resources" type="checkbox" value="1" />
            <span style="font-weight:normal">Turism</span>
        </label>
    </li>
    <li>
        <label for="id_resources_1">
            <input id="id_resources_1" name="resources" type="checkbox" value="2" />
            <span style="font-weight:normal">Agricole</span>
        </label>
    </li>
    <li>
        #others
    </li>
</ul>

最后是我在crea_region.html中的javascript：

<input type="button" value="Create" id="CreateButton" />

  <script type="text/javascript">
    <!--
    var myform = document.getElementById("crea_region_form");
    var number = myform.number.value;

    var city_index = document.getElementById("id_city").selectedIndex;
    var city;
    if (city_index > -1) {
    city = document.getElementById("id_city").options[city_index].text;
    document.write("city: " + city);
    }

    var risorse = myform.resources;
    var selectedresources = [];
    for (var i = 0; i < risorse.length; i++) {
      document.write("risorse: " + risorse[i].text);
      //document.write("risorse: " + risorse[i].value);
      if (risorse[i].selected) selectedresources.push(risorse[i].value);
    }
    document.write("risorse: " + selectedresources);

    var quantity = myform.quantity.value;

    var button = document.getElementById("CreateButton");
    // to be completed

    //-->
  </script>

问题出在资源上：一个Costum ModelMultipleChoiceField创建一个复选框列表。我的脚本无法读取文字和行

document.write("risorse: " + risorse[i].text) Give => risorse：未定义

document.write("risorse: " + risorse[i].value) Give => risorse：1

document.write("risorse: " + selectedresources) Give => risorse：

编辑

我的新脚本：

...
var risorse = myform.resources;
document.write("risorse: " + risorse[1].nextSibling.innerHTML)
console.log(risorse)
console.log(risorse[1].nextSibling.innerHTML)
var selectedresources = [];
for (var i = 0; i < risorse.length; i++) {
      document.write("risorse: " + risorse[i].nextSibling.innerHTML);
      if (risorse[i].selected) selectedresources.push(risorse[i].nextSibling.innerHTML);
}
document.write("risorse: " + selectedresources);

document.write("risorse: " + risorse[1].nextSibling.innerHTML) Give =>未定义

console.log(risorse)给予=> RadioNodeList [ <input#id_resources_0>, <input#id_resources_1>, <input#id_resources_2>, <input#id_resources_3>, <input#id_resources_4>, <input#id_resources_5>, <input#id_resources_6>, <input#id_resources_7> ]

console.log(risorse[1].nextSibling.innerHTML) Give =>未定义

最佳答案

抱歉，但checkbox没有text属性，根据此link，唯一的属性是：checked，name，required，value。

您将需要更新代码，可能在应用程序中的某个地方使用key => text来创建对象，以便找到与特定key对应的文本，如下所示：

var _texts = {'1': 'Text 1', '2': 'Text 2'};
var risorse = myform.resources;

for (var i = 0; i < risorse.length; i++) {
    document.write("risorse: " + _texts[risorse[i].value]);
}

随意填写以验证risorse[i].value中是否存在texts，您可以使用hasOwnProperty函数。

或者，您可以利用当前的html并使用nextSibling：

var risorse = myform.resources;

for (var i = 0; i < risorse.length; i++) {
    document.write("risorse: " + risorse[i].nextSibling.innerHTML);
}