简体   繁体   English

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

[英]Creating dynamic checkboxes in play2 framework?

I have two lists, ListA is a list containing the name and value of would-be-generated set of checkboxes. 我有两个列表, ListA是一个包含将要生成的复选框集的名称和值的列表。 ListB tells which ListA checkbox should be checked. ListB告知应选中哪个ListA复选框。

Here is the code: 这是代码:

@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>
    }
}

The code above generates the checkboxes redundantly, not just a single set of ListA checkboxes with checks on them. 上面的代码冗余地生成了复选框,而不仅仅是一组带有选中项的ListA复选框。

Ideal: 理想:

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

Actual: 实际:

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

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

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

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

Can you give me a clue on what I was doing wrong? 您能告诉我我做错了什么吗? Any help would be much appreciated. 任何帮助将非常感激。 Thank you 谢谢

Fixed it with jquery. 用jQuery修复它。

html: 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: 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);
                }
            }
        }
    });
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM