在 play2 框架中创建动态复选框？答案

【问题标题】：Creating dynamic checkboxes in play2 framework?在 play2 框架中创建动态复选框？
【发布时间】：2016-04-03 03:50:32
【问题描述】：

我有两个列表，ListA 是一个包含将要生成的复选框集的名称和值的列表。 ListB 告诉应该选中哪个 ListA 复选框。

代码如下：

@for((listA, index) <- model.ListA.zipWithIndex){
    @if(index % 4 == 0){
    <tr>
    }
    <td>
    @for(listB <- model.ListB){
    <input id="listB@index" name="listB[@index]" type="checkbox"
        value="@listA.codeVal" @(if(listA.codeVal == listB) "checked")/>
    <label>@listA.nameVal</label>
    }
    </td>
    @if(index % 4 == 3){
    </tr>
    }
}

上面的代码冗余地生成复选框，而不仅仅是一组带有检查的 ListA 复选框。

理想：

[/]CheckBox1 []CheckBox2 [/]CheckBox3 []CheckBox4

实际：

[/]CheckBox1 [ ]CheckBox1 [ ]CheckBox1 [ ]CheckBox1

[ ]CheckBox2 [ ]CheckBox2 [ ]CheckBox2 [ ]CheckBox2

[ ]CheckBox3 [ ]CheckBox3 [/]CheckBox3 [ ]CheckBox3

[ ]CheckBox4 [ ]CheckBox4 [ ]CheckBox4 [ ]CheckBox4

你能告诉我我做错了什么吗？任何帮助将非常感激。谢谢

【问题讨论】：

标签： checkbox playframework-2.0

【解决方案1】：

用 jquery 修复它。

html:

@for((listA, index) <- model.ListA.zipWithIndex){
    @if(index % 4 == 0){
    <tr>
    }

    <td>
    <input id="listB@index" class="listAClass" name="listB[@index]" type="checkbox"
        value="@listA.codeVal"/>
    <label>@listA.nameVal</label>
    </td>

    @if(index % 4 == 3){
    </tr>
    }
}

@for(listB<- model.ListB) {
    <input type="hidden" name="hiddenListB" value="@listB">
}

jQuery:

function setSelected() {

    var arrayListB = document.getElementsByName('hiddenListB');
    var arraySize = arrayListB.length;

    $(".listAClass").each(function(i) {

        var thisValue = $(this).val();

        for (var x = 0; x < arraySize; x++) {
            if (thisValue == arrayListB[x].value) {
                $(this).prop('checked',true);
            } else {
                if ($(this).is(":checked")) {
                } else {
                    $(this).prop('checked',false);
                }
            }
        }
    });
}

【讨论】：