Question

我有两个列表，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

你能告诉我一些错误吗？任何帮助将非常感激。谢谢

Answer 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);
                }
            }
        }
    });
}

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

1 个答案: