如何在ASP.NET MVC中創建CheckBox onClick事件

Question

我正在從數據庫訪問CheckBoxes的數據，現在我想顯示每個復選框的表單（如果已選中）。 如何實現呢？

我的表單設計-

 <div class="col-sm-12" id="roomtypes">
     @foreach(var item in ViewBag.RoomTypes)
     {
         <input type="checkbox" id="chk_@item.id" name="RoomTypes" value="@item.id" /> @item.type<br />

         <div class="col-sm-12" style="display:none;" id="Price_@item.id">
             <input type="number" placeholder="Enter Price" id="PriceValue" />
         </div>
     }

</div>

我想在選中復選框時顯示價格輸入 。 我的后端代碼-

 ViewBag.RoomTypes = db.RoomTypes.ToList(); 

我的代碼生成此輸出- 我的代碼生成此輸出

Answer 1

您可以使用css輕松地做到這一點。 將chkshowhide css類添加到您的輸入和div中，然后根據代碼添加css 。 您的代碼如下。

<div class="col-sm-12" id="roomtypes">
     @foreach(var item in ViewBag.RoomTypes)
     {
         <input type="checkbox" id="chk_@item.id" name="RoomTypes" value="@item.id" class="chkshowhide"/> @item.type<br />

         <div class="col-sm-12 chkshowhide" id="Price_@item.id">
             <input type="number" placeholder="Enter Price" id="PriceValue" />
         </div>
     }
</div>

css。

div.chkshowhide {
    display: none;
}
input.chkshowhide:checked + br + div.chkshowhide {
    display: block;
}

您可以在此處測試樣本。

 function saveData() { $('input.chkshowhide:checked').each(function() { var chkValue = $(this).val(); var divId = this.id.replace("chk", "Price"); var priceValue = $('#' + divId).find('input').val(); console.log('chkValue=' + chkValue + ", priceValue=" + priceValue); // Write your save code here }); } 

 div.chkshowhide { display: none; } input.chkshowhide:checked + br + div.chkshowhide { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <input type="checkbox" id="chk_1" name="RoomTypes" value="1" class="chkshowhide"> 1<br /> <div class="col-sm-12 chkshowhide" id="Price_1"> <input type="number" placeholder="Enter Price" id="PriceValue" /> </div> <input type="checkbox" id="chk_2" name="RoomTypes" value="2" class="chkshowhide"> 2<br /> <div class="col-sm-12 chkshowhide" id="Price_2"> <input type="number" placeholder="Enter Price" id="PriceValue" /> </div> <input type="checkbox" id="chk_3" name="RoomTypes" value="3" class="chkshowhide"> 3<br /> <div class="col-sm-12 chkshowhide" id="Price_3"> <input type="number" placeholder="Enter Price" id="PriceValue" /> </div> <input type="button" value="Save" onclick="saveData();" />