Вот так выглядит верстка:
$(".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 руб, в зеленой кнопке цена появляется от первой радиокнопки, а не от выбранной. Как можно это исправить?
Не хватало цикла 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);
}
У Вас для Whitelabel не присвоен id ="ch_4".
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
есть форма input и его значение получается через $("#input")val() а потом выводиться через создание параграфа, но если ввести что-то на подобии...
Хочу поменять цвет средствами jqery, почему меняется только на синий а красный не меняется?