[英]How can i pass radio button values based on the selected one?
我的視圖中有以下單選按鈕。 如何傳遞所選單選按鈕的值和數組索引中小於所選單選按鈕的值?
foreach (var record in Model.Months.Select(x=>$"{x.Substring(4,2)}/{x.Substring(0,4)}").OrderByDescending(x=>x))
{
<div class="radio col-12">
<div class="row">
<div class="col-5" style="">
@Html.RadioButton("MonthsAvailable", record, true, new { id = record, @class = "m-r" })<label>@record</label>
</div>
</div>
</div>
}
HTML 生成代碼
<div class="row">
<label class="form-check-inline p-l-md m-b-sm m-r-md">
<input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="202008" checked="checked">
<div class="check-icon-radio"><i></i></div>
082020
</label>
</div>
<div class="row">
<label class="form-check-inline p-l-md m-b-sm m-r-md">
<input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="092020">
<div class="check-icon-radio"><i></i></div>
092020
</label>
</div>
我的 Model
public class MonthsAvailable
{
public List<string> Months{ get; set; }
}
我的行動收到
public async Task<IActionResult> MonthsAvailable(List<string> monthsAvailable)
{
...
}
我的單選按鈕如下所示
我正在努力完成
When I select 062020 pass only 062020 to the controller,
When I select 072020 pass 062020 and 072020,
when I select 082020 pass 062020, 072020 and 082020
when I select 092020 pass 062020, 072020, 082020 and 092020 and etc
您可以為所有.row
div 提供一些outer
div。 然后,每當單擊提交按鈕時,首先使用它獲取checked
的單選按鈕值,我們將獲得選中單選的 div 的index()
編號。 最后,使用for-loop
從其他單選按鈕獲取值並將它們推入array
並使用 ajax 傳遞相同的值。
演示代碼:
$("#save").on("click", function() { var checked_value = []; //declare this var value = $("input[name=MonthsAvailable]:checked").val() //get value of checked checkboxs var lengths = $("input[value=" + value + "]").closest(".row").index() //get index console.log($("input[value=" + value + "]").closest(".row").index()) //loop for (var i = 0; i <= lengths; i++) { checked_value.push($(".outer.row:eq(" + i + ") input:radio").val()) //push value inside array } console.log(JSON.stringify(checked_value)) //ajax call $.ajax({ contentType: 'application/json; charset=utf-8', type: 'POST', url: 'yoururl', data: JSON.stringify(checked_value), success: function(data) { console.log("done") } }); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!--only add this outer div--> <div class="outer"> <div class="row"> <label class="form-check-inline pl-md mb-sm mr-md"> <input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="202008" checked="checked"> <div class="check-icon-radio"><i></i></div> 202008 </label> </div> <div class="row"> <label class="form-check-inline pl-md mb-sm mr-md"> <input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="092020"> <div class="check-icon-radio"><i></i></div> 092020 </label> </div> <div class="row"> <label class="form-check-inline pl-md mb-sm mr-md"> <input class="hidden-up pos-abs monthsAvailable" id="082020" name="MonthsAvailable" type="radio" value="2020018" checked="checked"> <div class="check-icon-radio"><i></i></div> 2020018 </label> </div> <div class="row"> <label class="form-check-inline pl-md mb-sm mr-md"> <input class="hidden-up pos-abs monthsAvailable" id="092020" name="MonthsAvailable" type="radio" value="0920202"> <div class="check-icon-radio"><i></i></div> 0920202 </label> </div> </div> <button type="button" id="save">Save</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.