How can i pass radio button values based on the selected one?

Question

I have the following radio button in my view. How can I pass the value of the selected radio button and values in an array index less than the selected radio button?.

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

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

My Model

 public class MonthsAvailable
   {
    public List<string> Months{ get; set; }       
   }

My Action Receives

public async Task<IActionResult> MonthsAvailable(List<string> monthsAvailable)
 {
 ...
 }

My radio button looks like as follows

I am trying to accomplish

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



              

Answer 1

You can give some outer div to all your .row div. Then, whenever submit button is clicked first get checked radio button value using this we will get the index() number of the div where radio is checked. Lastly, use for-loop to get the value from other radio buttons and push them in array and pass same using ajax.

Demo code :

 $("#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>