ASP MVC：获取选中的复选框值，并获得输入隐藏的总和时复选框被选中

Question

我创建与表格的形式ASP页面的预注册系统，其中内容如下：

列1：牌号

第2栏：复选框（值被动态地从SQL Server生成）与输入隐藏起来（值等于所述受试者单位）

3柱：主题代码

第4列：主题描述

第5列：主题单位

第6列：主题预备知识

页的观点是在这里： Page view

我希望发生的是得到的总和通过隐藏在复选框后面的输入值检查复选框。由于复选框（主题代码）的值将在帖子中使用。

这里是复选框的格式和隐藏：

<input type="checkbox" name="BSCS" value="@courses.course_code" onchange="checkUnits()" style="height:16px; width:16px;" /> 
<input type="hidden" name="BSCS_units" value="@courses.subject_unit" /> 

我试图使用JavaScript和它的文本字段显示值“南”

这里是脚本：

<script> 
function checkUnits() { 
    document.AdvisingForm.total.value = ''; 
    var sum = 0; 
    var maxUnits = "@Html.Raw(Json.Encode(ViewBag.maxUnit))"; 
    for (i = 0; i < document.AdvisingForm.BSCS.length; i++) { 
     if (document.AdvisingForm.BSCS[i].checked) { 
      sum = sum + parseInt(document.AdvisingForm.BSCS_units[i].value); 

      if (sum >= +maxUnits + 2) { 
       alert("You have already exceeded the maximum number of units required for this semester. Remove one of the courses selected to proceed on next step."); 
       $('#course-BSCS').attr('disabled', 'disabled'); 
      } 
      else 
      { 
       $('#course-BSCS').removeAttr('disabled'); 
      } 
     }  
    } 

    document.AdvisingForm.total.value = sum; 
} 
</script> 

我真的与脚本部分混淆。我怎样才能做到这一点。任何帮助将不胜感激。非常感谢。

Answer 1

如果我正确理解你的问题，那么下面的例子可以帮助你解决这个问题。

您必须为每个复选框和隐藏字段赋予一个id字段，如下所示。

<input type="checkbox" class="ChkCourceCls" name="BSCS" id="@("chkbox_" + courses.course_code)" value="@courses.course_code" onchange="checkUnits()" style="height:16px; width:16px;" /> 
<input type="hidden" name="BSCS_units" id="@("hdnSubjectUnit_" + courses.course_code)" value="@courses.subject_unit" /> 

您可以指定你的复选框，并隐藏字段像上面，然后在复选框的onchange事件，你可以找到与所分配的特殊隐藏字段的值。

而且在JS

function checkUnits() { 
var yourarray = []; 

$('input.ChkCourceCls[type=checkbox]').each(function() { 


if($(this).is(':checked')) 
{ 
    yourarray.push($(this).val());// in this array you got all cource code of subjects that are checked by the user. 
} 

} 
var arylen=yourarray.length; 
var ToalSubjectunit=0; 
for(var i=0;i<arylen;i++) 
{ 
ToalSubjectunit+= parseInt($("#hdnSubjectUnit_"+yourarray[i]).val()); 
} 
alert(ToalSubjectunit)// here you got the total unit of subject , based on this you can do your validations 

} 

注意：您也可以使用name属性，而不是类名。我只提供了一个示例代码，您可以根据您的逻辑和要求对此代码进行更改

Answer 2

在这个

var maxUnits = "@Html.Raw(Json.Encode(ViewBag.maxUnit))"; 

最大单位看看变量存储串。您不能使用字符串值进行数字比较。

var maxUnits = "450"; 
var newVal = maxUnits + 2 
alert(newVal); 

你会看到一个警告"4502"，不452！

删除双引号。

var maxUnits = @Html.Raw(Json.Encode(ViewBag.maxUnit)); 

我不知道你为什么要在ViewBag项目上做Json.Encode。但是，如果你在你的操作方法设置一个整数值到ViewBag.maxUnit像ViewBag.maxUnit = 4445;可以直接访问，在你的JavaScript（Razor视图内）这样

var maxUnits = @ViewBag.maxUnit; 
alert(maxUnits); 

另外，你其实并不需要的隐藏字段。您可以将当前保留在隐藏值中的值存储在复选框输入字段本身的html5数据属性中。

<input type="checkbox" data-unit="@courses.subject_unit" 
            name="BSCS" value="@courses.course_code" /> 

我删除了平变化javasript电话，我们将处理在unobutrisive JavaScript的方式的改变事件。

听这些特定输入change事件（我使用的名称值作为jQuery选择）

$(function() { 
    var maxUnits = @ViewBag.maxUnit; 
    $("input[name='BSCS']").change(function() { 
     var sum = 0; 
     $("input[name='BSCS']:checked").each(function(a, b) { 
      sum += parseInt($(this).data("unit")); 

      // Keep in mind that this if condition is going to execute in the loop, 
      // you may consider moving it outside of the loop as well. 

      if (sum >= maxUnits + 2) { 
       alert("You have already exceeded."); 
       $('#course-BSCS').attr('disabled', 'disabled'); 
      } 
      else { 
       $('#course-BSCS').removeAttr('disabled'); 
      } 

     }); 
     $("#total").html(sum); 
    }); 

});