[英]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.