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();(".checkboxchk")。道具("检查",假);

   // 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);
       });
   });            
});

Answer 2

尝试使用数据。tarifTypeOptionList[i]插入使用data.tarifTypeOptionList[0]

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