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，它在文本字段中显示值“NaN”

这是脚本：

<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

看看这个

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

maxUnits变量存储字符串。您不能使用字符串值进行数字比较。

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（里面的剃刀视图）中访问它，就像这样

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

此外，您实际上不需要隐藏字段。您可以在复选框输入字段本身的html5数据中存储当前保留在隐藏值内的值。

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

我删除了onchange javasript调用，因为我们将以非破坏性的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);
    });

});

Answer 2

如果我正确理解您的问题，则以下示例可帮助您解决问题。

您必须为每个复选框和隐藏字段指定一个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属性而不是类名。我只提供了一个示例代码，您可以根据您的逻辑和要求对此代码进行更改

ASP MVC：勾选复选框值并在选中复选框时隐藏输入的总和

2 个答案: