Как создать событие CheckBox onClick в asp.net MVC

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