以动态方式获取选中的单选按钮值

Question

我正在尝试获取 table 行的所有值，但我无法从每个 table 行中获取选定的单选按钮值。 table 是动态生成的，因此我无法使用静态值进行访问。所以我尝试使用以下代码提取值：

    <div class="tbl card  px-2 py-2 my-2" id="GCSA3011">
   <div class="card-body">
      <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
         <div class="row">
            <div class="col-sm-12">
               <table class="table table-bordered table-hover GCSA3011 ptbl dataTable no-footer dtr-inline"  id="DataTables_Table_0" role="grid">
                  <thead>
                     <tr style="text-align: center;" role="row">
                        <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 5%;">#</th>
                        <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 55%;">Question</th>
                        <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 40%;">Response</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr role="row" class="odd">
                        <td class="dtr-control" tabindex="0"> 
                           <label class="lnx-fd" id="LAB1029_6192" tag="LAB1029" fl-type="label">
                           1
                           </label>
                        </td>
                        <td> 
                           <label class="lnx-fd" id="LAB1030_6192" tag="LAB1030" fl-type="label">
                           Instructions
                           </label>
                        </td>
                        <td>
                           <div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_6192">
                              <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Outstanding
                              </label>
                              <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" checked="">Excellent
                              </label>
                              <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Good
                              </label>
                              <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Average
                              </label>
                           </div>
                        </td>
                     </tr>
                     <tr role="row" class="even">
                        <td class="dtr-control" tabindex="0"> 
                           <label class="lnx-fd" id="LAB1029_4655" tag="LAB1029" fl-type="label">
                           31
                           </label>
                        </td>
                        <td> 
                           <label class="lnx-fd" id="LAB1030_4655" tag="LAB1030" fl-type="label">
                           Response
                           </label>
                        </td>
                        <td>
                           <div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_4655">
                              <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Outstanding
                              </label>
                              <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655" checked="">Excellent
                              </label>
                              <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Good
                              </label>
                              <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Average
                              </label>
                           </div>
                        </td>
                     </tr>
                  </tbody>
               </table>
            </div>
         </div>
      </div>
   </div>
</div>
         
    
    $(".tbl").each(function(){
        let tgroup_id = $(this).attr("id");
        let tgp_err = [],tgp_obj = [];
        var itbl = $('.'+tgroup_id).DataTable();
        itbl.rows().every(function () {
             let comp_arr_g=[];
            var d = this.data();
            for(var i=0;i<d.length;i++){
                var a = $('input[name="'+$(d[i]).attr('id') +'"]:checked');
            }
            
        });
    });

使用它我可以获取标签和输入字段的值，但是当我尝试获取选定的收音机时它不起作用。请帮我解决一下。

Answer 1

您可以检查 d[i] 属性（fl-type）值是否为 radiogroup 如果为真，那么您可以简单地使用 find(":checked").closest("label").text() 来获取检查的无线电值，否则只需使用 $(d[i]).text() 获取其他 tds 值。

演示代码 :

$(".tbl").each(function() {
  let tgroup_id = $(this).attr("id");
  let tgp_err = [],
    tgp_obj = [];
  var itbl = $('.' + tgroup_id).DataTable();
  itbl.rows().every(function() {
    let comp_arr_g = [];
    var d = this.data();
    for (var i = 0; i < d.length; i++) {
      //check if the attr is radiogroup
      if ($(d[i]).attr("fl-type") == "radiogroup") {
        //get checked radio
        var a = $(d[i]).find(":checked").closest("label").text().trim()
        console.log(a)
      } else {
        //just label
        console.log($(d[i]).text().trim())
      }
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

<div class="tbl card  px-2 py-2 my-2" id="GCSA3011">
  <div class="card-body">
    <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">
      <div class="row">
        <div class="col-sm-12">
          <table class="table table-bordered table-hover GCSA3011 ptbl dataTable no-footer dtr-inline" id="DataTables_Table_0" role="grid">
            <thead>
              <tr style="text-align: center;" role="row">
                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 5%;">#</th>
                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 55%;">Question</th>
                <th class="sorting_disabled" rowspan="1" colspan="1" style="width: 40%;">Response</th>
              </tr>
            </thead>
            <tbody>
              <tr role="row" class="odd">
                <td class="dtr-control" tabindex="0">
                  <label class="lnx-fd" id="LAB1029_6192" tag="LAB1029" fl-type="label">
                           1
                           </label>
                </td>
                <td>
                  <label class="lnx-fd" id="LAB1030_6192" tag="LAB1030" fl-type="label">
                           Instructions
                           </label>
                </td>
                <td>
                  <div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_6192">
                    <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" checked>Outstanding
                              </label>
                    <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192" >Excellent
                              </label>
                    <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Good
                              </label>
                    <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_6192">Average
                              </label>
                  </div>
                </td>
              </tr>
              <tr role="row" class="even">
                <td class="dtr-control" tabindex="0">
                  <label class="lnx-fd" id="LAB1029_4655" tag="LAB1029" fl-type="label">
                           31
                           </label>
                </td>
                <td>
                  <label class="lnx-fd" id="LAB1030_4655" tag="LAB1030" fl-type="label">
                           Response
                           </label>
                </td>
                <td>
                  <div class="form-check lnx-fd" tag="LAB1031" fl-type="radiogroup" id="LAB1031_4655">
                    <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Outstanding
                              </label>
                    <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655" checked="">Excellent
                              </label>
                    <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Good
                              </label>
                    <label class="form-check-label" style="margin-left:20px;display:inline-block;">
                              <input class="form-check-input rg" type="radio" value="feedback_response" name="feedback_response_4655">Average
                              </label>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

以动态方式获取选中的单选按钮值

Get the selected Radio Button value in a dynamic approach

javascript

jquery

datatables