javascript - Jquery 复选框选择迭代

Question

$('.tg tr.data-list-row[name=data-list-row]').click(function() {               
       var currentId = $(this).closest('tr').attr('id');
       $.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
           $("#current_typetarif_id").val(data.id);
           $("#inputName").val(data.libelle);
           $("#inputCode").val(data.code);
           $("#inputTarif").val(data.montantTarifDefaut);     

           $('input[type="checkbox"]').each(function(i) {
                $("#option_tarif_chk_" + data.tarifTypeOptionList[0].tarifOptionId).prop('checked', true);
            });
       });            
});

我有以下代码，可以从下面的 JSON 中获取数据:

{
  "id": 1,
  "code": "0001",
  "libelle": "TARIF PUBLIC",
  "montantTarifDefaut": 10.00,
  "tarifTypeList": [
    {
      "chambreTypeId": 1,
      "tarifTypeId": 1
    }
  ],
  "tarifTypeOptionList": [
    {
      "typeTarifId": 1,
      "tarifOptionId": 1
    },
    {
      "typeTarifId": 1,
      "tarifOptionId": 2
    },
    {
      "typeTarifId": 1,
      "tarifOptionId": 3
    }
  ]
}

我必须使用data.tarifTypeOptionList[0]，以便它返回我的值，但看起来迭代不起作用，它只返回第一个值:

 {
    "typeTarifId": 1,
    "tarifOptionId": 1
 },


<form class="form-horizontal" style="margin: 0 auto; width: 150px;" id="scrollit" name="thisForm">
                        <c:forEach items="${option_tarif_list}" var="option_tarif" varStatus="loop">
                            <div class="checkbox1">
                                <label>
                                    <input type="checkbox" name="tarif_inclue" value="${option_tarif.libelle}" class="checkboxchk" id="option_tarif_chk_${option_tarif.id}">
                                    ${option_tarif.libelle}
                                </label>
                            </div>
                        </c:forEach>
<!--                        <input type="button" value="Submit" onclick="loopForm(document.thisForm);">
                        <div id="cbResults"></div>-->
                    </form>

HTML 表格行:

<table class="table tg" style="table-layout: fixed; width: 745px">
                <colgroup>
                <col style="width: 249px">
                <col style="width: 249px">
                <col style="width: 249px">

                </colgroup>

                <thead>
                    <tr>
                       <th class="tg-s6z2 bdleft">NOM</th>
                       <th class="tg-s6z2">CODE</th>
                       <th class="tg-s6z2">PRIX PAR DEFAUT</th>
                    </tr>
                </thead>
                <tfoot>
                </tfoot>
                <tbody>
                    <tr>
                    <td colspan="5">
                        <div class="scrollit">
                            <table class="table tg" style="table-layout: fixed;">
                                <colgroup>
                                <col style="width: 220px">
                                <col style="width: 240px">
                                <col style="width: 240px">
                                </colgroup>


                                <c:forEach items="${type_tarif_list}" var="type_tarif" varStatus="loop">  
                                  <tr class="data-list-row" name="data-list-row" id="${type_tarif.id}" style="cursor: pointer;">
                                    <td class="tg-s6z2 bdleft">${type_tarif.libelle}</td>
                                    <td class="tg-s6z2">${type_tarif.code}</td>
                                    <td class="tg-s6z2">${type_tarif.montantTarifDefaut}</td>
                                    <td class="deleterow bdryt" id="${type_tarif.id}" name="del_button"><div class="glyphicon glyphicon-remove" title="Supprimer"></div></td>
                                  </tr>
                                </c:forEach>
                            </table>
                        </div>
                    </td>
                    </tr>
                </tbody>
            </table>

我如何确保获得本次迭代中的所有值？我认为 .each() 方法可以完成这项工作，但事实并非如此。请帮助发现我做错了什么。

谢谢。

Answer 1

$('input[type="checkbox"]') 将迭代所有 checkboxes，而不是尝试迭代 tarifTypeOptionList，所以它会给你当前的对象，通过使用相同的我们可以设置checked属性true。

$('.tg tr.data-list-row[name=data-list-row]').click(function() {               
   var row = $(this).closest('tr'), currentId =  row.attr('id');

   // to uncheck the previous row checkboxes 

row.siblings().find(".checkboxchk").prop('checked', false);

   // this will uncheck the all checkboxes with class name `checkboxchk` before setting the `checked` to true of the selected row checkboxes.
   $(".checkboxchk").prop('checked', false);

   $.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
       $("#current_typetarif_id").val(data.id);
       $("#inputName").val(data.libelle);
       $("#inputCode").val(data.code);
       $("#inputTarif").val(data.montantTarifDefaut);     

       // to check the current row checkboxes using json data
       $.each(data.tarifTypeOptionList, function(i, obj) {
           $("#option_tarif_chk_" + obj.tarifOptionId).prop('checked', true);
       });

   });            
});