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

尝试使用data.tarifTypeOptionList [i]不使用data.tarifTypeOptionList [0]

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

Answer 2

$('input[type="checkbox"]')将遍历所有checkboxes，而不是尝试迭代tarifTypeOptionList，因此它将为您提供当前对象，通过使用我们可以设置checked 1}} property 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);
       });

   });            
});

Jquery复选框选择迭代

2 个答案: