Javascript 如何在asp.net MVC中创建复选框onClick事件

我正在从数据库访问复选框的数据，现在我想显示每个复选框的表单（如果选中）。如何做到这一点

我的表格设计-

 <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>

我的代码正在生成这个输出-

---

您可以使用

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>

你们可以在这里测试样品

函数saveData（）{
$（'input.chkshowhide:checked'）。每个（函数（）{
var chkValue=$（this.val（）；
var divId=此.id.replace（“chk”、“价格”）；
var priceValue=$（'#'+divId）.find（'input'）.val（）；
log（'chkValue='+chkValue+”，priceValue=“+priceValue”）；
//在此处编写保存代码
});
}

div.chkshowhide{
显示：无；
}
input.chkshowhide:选中+br+div.chkshowhide{
显示：块；
}

1

2

3

将JavaScript事件绑定到复选框输入。当复选框值更改时，请测试复选框值，然后使您的价格输入可见，或将新输入（用JavaScript创建）附加到表单中。您可以指导我如何为生成的每个复选框执行此操作吗。请。现在假设，我需要将这些详细信息单独保存（一个一个-取决于选中的复选框数量）到数据库中，如何在MVC中做到这一点？@GautamSharma更新了代码，用于为每个选中的输入逐个保存数据。

<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>

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