如何根据选定的单选按钮值传递单选按钮值？

Posted 2023-03-27

【中文标题】如何根据选定的单选按钮值传递单选按钮值？

【英文标题】：How can i pass radio button values based on the selected one?

【发布时间】：2021-04-14 17:43:36

【问题描述】：

我的视图中有以下单选按钮。如何传递所选单选按钮的值和数组索引中的值小于所选单选按钮？。

 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>

我的模特

 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



              

【问题讨论】：

您好，您需要使用 ajax 传递它们吗？还是通过表单提交？

嗨@Swati 谢谢。我该怎么做，我怎样才能得到这些值？

目前如何通过单击某个按钮将数据提交给控制器？

Yes @Swati on button click submit to controller

你能展示你上面代码生成的html吗？你也可以通过 ajax 提交值吗？

【参考方案1】：

您可以将一些 outer div 分配给您所有的 .row 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 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>
      202008
   </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>
  <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="2020018" checked="checked">
      <div class="check-icon-radio"><i></i></div>
      2020018
   </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="0920202">
      <div class="check-icon-radio"><i></i></div>
      0920202
   </label>
  </div>
</div>
<button type="button" id="save">Save</button>

【讨论】：

我的 MVC 操作参数中的一件事我有 public async Task<IActionResult> MonthsAvailable(List<string> monthsAvailable) 没有收到任何东西，如果你有任何想法？

我对 c# 的了解有限。但是，现在您只需传递数组，因此将 List<string> 更改为 string[] 或 this 应该会有所帮助:)