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

我的代码正在生成此输出- My code's generating this output

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();" />

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

1 个答案: