チェックボックスがオンになっている同じ行のデータが必要です。テーブルの行がforループになっています

bugfix> javascript > 投稿

チェックボックスをクリックする同じ行のデータが必要です。テーブルの行がforループになっています 最後に合計金額を表示したいのですが、すべてのボックスが表示されています。 そして、私はビューで名前で値を取得しましたが、ここではフォームコンポーネントがforループに入っているため、データがない場合は表示されません。

これが私のindex.html：

   {% for j in package %}
        <tr class="valid-container">
            <td style="cursor:pointer;">
               <input type="checkbox" name="c1" >&nbsp; {{ j.visa_type }}
            </td>
           <td height="52">
                <select class="custom-select processing_type" name="processing_type" data-id="{{ j.id }}" required>
                    <option value="{{ j.price }}" selected>Normal</option>
                    <option value="{{ j.express_price }}">Express</option>
                </select>
           </td>
          <td height="52">
            <select class="custom-select no_of_person" name="no_of_person" data-id="{{ j.id }}" required>
                <option value="1" selected>1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
                <option value="9">9</option>
                <option value="10">10</option>
            </select>
         </td>
         <td width="190" height="60">
            <div class="input-group date" data-date-format="dd.mm.yyyy">
                <div class="input-group mb-2">
                    <input  type="text" class="form-control" name="travel_date" id="date" placeholder="dd.mm.yyyy">
                        <div class="input-group-text"><i class="ti-calendar"></i></div>
                            <div class="input-group-addon">
                            </div>
                                <div class="input-group-prepend">
                                </div>
                </div>
            </div>
        </td>
        <td>{{ j.currency_type }}&nbsp;&nbsp; <output name="result" class="package_price">{{ j.price }}</output>.00</td>
                                </tr>
                    {% endfor %}

これが私のpackage.js：

$('.valid-container').ready(function() {
var date = $(this).find('#date').attr('required',true);
  $('select').on('change', function() {
    var id = $(this).data("id");
    var total = $('select[name=processing_type]').val() * $('select[name=no_of_person]').val();
    var price = $(this).find('.package_price').text();
  });
});

javascript

python

jquery

回答 1 件

  • 使用できます $(this).closest("tr") 最も近いtrを取得し、単に使用する .find() selectから必要な値を取得してから使用するには .text() 合計値を追加するには package_price 。

    デモコード（ダミー値付き）：

    //on change of select or checkbox
$('select ,input[type=checkbox] ').on('change', function() {
  var selector = $(this).closest("tr")//get closest tr
  //if checkbox is checked
  if (selector.find("input[type=checkbox]").is(":checked")) {
  //get select valus
    var prcs_type = selector.find("select[name=processing_type]").val();
    var no_person = selector.find("select[name=no_of_person]").val();
    var total = prcs_type * no_person;
    selector.find(".package_price").text(total)//add value to package_prcie.
  }
});


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tr class="valid-container">
    <td style="cursor:pointer;">
      <input type="checkbox" name="c1" id="c1">1
    </td>
    <td height="52">
      <select class="custom-select processing_type" name="processing_type" data-id="1" required>
        <option value="19" selected>Normal</option>
        <option value="20">Express</option>
      </select>
    </td>
    <td height="52">
      <select class="custom-select no_of_person" name="no_of_person" data-id="1" required>
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </td>
    <td width="190" height="60">
      <div class="input-group date" data-date-format="dd.mm.yyyy">
        <div class="input-group mb-2">
          <input type="text" class="form-control" name="travel_date" id="date" placeholder="dd.mm.yyyy">
          <div class="input-group-text"><i class="ti-calendar"></i></div>
          <div class="input-group-addon">
          </div>
          <div class="input-group-prepend">
          </div>
        </div>
      </div>
    </td>
    <td>{{ j.currency_type }}&nbsp;&nbsp; <output name="result" class="package_price">{{ j.price }}</output>.00</td>
  </tr>
  <tr class="valid-container">
    <td style="cursor:pointer;">
      <input type="checkbox" name="c1" id="c1">2
    </td>
    <td height="52">
      <select class="custom-select processing_type" name="processing_type" data-id="2" required>
        <option value="19" selected>Normal</option>
        <option value="20">Express</option>
      </select>
    </td>
    <td height="52">
      <select class="custom-select no_of_person" name="no_of_person" data-id="2" required>
        <option value="1" selected>1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
      </select>
    </td>
    <td width="190" height="60">
      <div class="input-group date" data-date-format="dd.mm.yyyy">
        <div class="input-group mb-2">
          <input type="text" class="form-control" name="travel_date" id="date" placeholder="dd.mm.yyyy">
          <div class="input-group-text"><i class="ti-calendar"></i></div>
          <div class="input-group-addon">
          </div>
          <div class="input-group-prepend">
          </div>
        </div>
      </div>
    </td>
    <td>{{ j.currency_type }}&nbsp;&nbsp; <output name="result" class="package_price">{{ j.price }}</output>.00</td>
  </tr>
</table>

あなたの答え

関連記事