Не выбирается активный чекбокс

219
19 апреля 2022, 10:20

Вот так выглядит верстка:

$(".ch_childrens input").on("change", function() {
  parentBlock = $(this).closest(".checkboxes_array");
  chChildrens = parentBlock.find(".ch_childrens input");
  mainCheckbox = parentBlock.find(".main_checkbox input");
  chChildrens.each(function() {
    if (!$(this).is(":checked")) {
      mainCheckbox.prop("checked", false);
      return false;
    } else {
      mainCheckbox.prop("checked", true);
    }
  });
  getPrice(parentBlock);
});
function getPrice(parentBlock) {
  payTable = parentBlock.find(".table");
  tableRow = payTable.find(".table_row");
  price = 0;
  tableRow.each(function() {
    filterCheckbox = $(this).find(".ch_childrens input");
    if (filterCheckbox.is(":checked")) {
      radio = $(this).find(".radio input");
      if (radio.is(":checked")) {
        radioVal = parseInt(radio.val());
        price += radioVal;
      }
    }
  });
  parentBlock.find(".priceVal").text(price);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="checkboxes_array price_table">
                            <div class="table table_2 table_2_2 pay_table">
                                <div class="table_row">
                                    <div class="cell">
                                        <div class="checkbox main_checkbox">
                                            <label for="ch_1"><input type="checkbox" name="pay_ch" id="ch_1" />Продукт</label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <h3>На месяц</h3>
                                    </div>
                                    <div class="cell">
                                        <h3>На год (-15%)</h3>
                                    </div>
                                    <div class="cell">
                                        <h3>Оплачен до</h3>
                                    </div>
                                </div>
                                <div class="table_row">
                                    <div class="cell">
                                        <div class="checkbox ch_childrens">
                                            <label for="ch_2"><input type="checkbox" name="pay_ch" id="ch_2" /><b>Виджет для minter.org</b></label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <div class="radio">
                                            <label><input type="radio" name="r_1" value="400" />400 руб</label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <div class="radio">
                                            <label><input type="radio" name="r_1" value="400" />400 руб</label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <p>2020.10.20</p>
                                    </div>
                                </div>
                                <div class="table_row">
                                    <div class="cell">
                                        <div class="checkbox ch_childrens">
                                            <label for="ch_3"><input type="checkbox" name="pay_ch" id="ch_3" /><b>Виджет для yandax.ru</b></label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <div class="radio">
                                            <label><input type="radio" name="r_2" value="400" />400 руб</label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <div class="radio">
                                            <label><input type="radio" name="r_2" value="4000" />4000 руб</label>
                                        </div>                                          
                                    </div>
                                    <div class="cell">
                                        <p>2020.10.20</p>
                                    </div>
                                </div>
                                <div class="table_row">
                                    <div class="cell">
                                        <div class="checkbox ch_childrens">
                                            <label><input type="checkbox" name="pay_ch" /><b>Whitelabel</b></label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <div class="radio">
                                            <label><input type="radio" name="r_3" value="500" />500 руб</label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <div class="radio">
                                            <label><input type="radio" name="r_3" value="5100" />5100 руб</label>
                                        </div>
                                    </div>
                                    <div class="cell">
                                        <p>2020.12.31</p>
                                    </div>
                                </div>
                            </div>
                            <div class="pills_wrapp disabled">
                                <div>
                                    <a href="#" class="green_pill green_pill_3">Оплатить <span class="priceVal">0</span> руб</a>
                                </div>
                            </div>
                        </div>  

При выборе 5100 руб, в зеленой кнопке цена появляется от первой радиокнопки, а не от выбранной. Как можно это исправить?

Answer 1
Не хватало цикла each.
function getPrice(parentBlock) {
      payTable = parentBlock.find(".table");
      tableRow = payTable.find(".table_row");  
      price = 0;
      tableRow.each(function() {
        filterCheckbox = $(this).find(".ch_childrens input");
        if(filterCheckbox.is(":checked")) {
          radio = $(this).find(".radio input");
          radio.each(function() {
            if( $(this).is(":checked") ) {
              radioVal = parseInt($(this).val());
              console.log(radioVal);
              price += radioVal;
            }
          });
        } else {
          console.log(0);
        }
      });
      parentBlock.find(".priceVal").text(price);
    }
Answer 2

У Вас для Whitelabel не присвоен id ="ch_4".

READ ALSO
Защита от хакинга в input

Защита от хакинга в input

есть форма input и его значение получается через $("#input")val() а потом выводиться через создание параграфа, но если ввести что-то на подобии...

178
как при помощи jquery поменять css свойство?

как при помощи jquery поменять css свойство?

Хочу поменять цвет средствами jqery, почему меняется только на синий а красный не меняется?

217
Jquery пробелы в json переменной

Jquery пробелы в json переменной

как исправить, чтобы после вставки атрибут был без пробелов

151