Question

当我点击“extraire”按钮时，我试图检索所有复选框的所有值（见下图）。我想有一个true，false列表，它们是复选框的值（如果可能的话，还有相关的字段名称）。

控制器：

case class extractionBoxForm(value : Boolean)
val extractionForm : Form[extractionBoxForm] = Form(
mapping(
  "value" ->  boolean
)(extractionBoxForm.apply)(extractionBoxForm.unapply)

）

观点：

@helper.form(routes.ExtractionController.checkedValues){
    @listNameFields.map { fieldName =>
            <div class="form_inputs clearfix clickable">
                <div class="row-fluid">
                    <div class="span3">
                        <label class="control-label">@fieldName.tail.head :</label>
                    </div>
                    <div class="span1 offset8">
                        @helper.checkbox(extractionForm("value"),'name ->"rendering", 'class->"chkbox1",'checkboxMap -> "value")
                    </div>
                </div>
            </div>
       }
       <div class="validForm">
           <input type="submit" onclick="sayHello()" value="Extraire" class="btn btn-info">
       </div>
}

我尝试了Handling repeated values，但我无法使用复选框

Answer 1

每个复选框都需要具有不同的值。然后，您可以将这些值绑定到列表中。

Answer 2

最后我得到了它的工作：

Play-scala版本：

<div class="widget_content no-padding">
           @helper.form(routes.ExtractionController.checkedValues){
            @for(i <- 0 until listNameFields.size) {
            <div class="form_inputs clearfix">
            <div class="row-fluid">
                <div class="span5">
                    <label class="control-label">@listNameFields(i).description :</label>
                </div>
                <div id="checkboxlist" class="span1 offset6">
                 @helper.checkbox(myForm("fields[" + i + "]"), '_label -> "" , 'value -> listNameFields(i).fieldName)
                </div>
            </div>
        </div>

            }
            <div class="validForm">
                <input type="submit" id="Extract1" value="Extraire" class="btn btn-info">
            </div>
            }

Jquery版本：

<script type="text/javascript" src="@routes.ExtractionController.javascriptRoutes">     </script>

<script>
$(document).ready(function () {
/* Get the checkboxes values based on the class attached to each check box */
$("#Extract1").click(function() {
    getValueUsingClass();
   });
});

function getValueUsingClass(){
/* declare an checkbox array */
var chkArray = [];

/* look for all checkboes that have a class 'chk' attached to it and check if it was checked */
$(".chkbox1:checked").each(function() {
    chkArray.push($(this).val());
});

/* we join the array separated by the comma */
var selected;
selected = chkArray.join(',') + ",";



/* check if there is selected checkboxes, by default the length is 1 as it contains one single comma */
if(selected.length > 1){
   /* alert("You have selected " + selected);             */
}else{
    alert("Please at least one of the checkbox");
}

 jsRoutes.controllers.ExtractionController.checkedValues(chkArray).ajax({
    type: "post",
    success: function(){
    window.location.href = "/extraction"
    },
    error:function(){
    }

});
   }
</script>

动态复选框值播放

2 个答案: