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

});