Динамической суммирование и вывод значении input
как суммировать и динамически вывести значение сгенерированных input
$(document).ready(function() {
$('.sum_value input').click(function() {
$('#options_value2').html('');
$('input:checkbox:checked').each(function() {
$('#options_value2').append($(this).val() + (`<input class="number" type="number" value="" max="${this.value}" /><br>`));
});
});
});
<div class="grid_css">
<div class="column_1">
<ul id="accordion">
<li>
<div class="line_All_green">
<div class="sum_value">
<div id="1" class="table-td">
<input type="checkbox" value="11111" id="1_1"><span>A 1</span><noscript>aaa111</noscript>
</div>
<div id="2" class="table-td">
<input type="checkbox" value="22222" id="2_2"><span>B 2</span><noscript>bbb222</noscript>
</div>
<div id="3" class="table-td">
<input type="checkbox" value="33333" id="3_3"><span>C 3</span><noscript>ccc333</noscript>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="column_3" id="column_3">
<div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
<div class="options_value2" id="options_value2">
<p id="options_value2" class="options_value2"></p>
</div>
<button id="button2" class="button2" > Copy </button>
</div>
</div>
|
Цитата:
https://codernote.ru/jquery/sobytiya-jquery/on/ |
а можно конкретно на указанном примере? гуглить все умеем, но когда не разбираемся пишем тут.
|
vasoli,
:(
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
$('.sum_value input').click(function() {
$('#options_value2').html('');
$('input:checkbox:checked').each(function() {
$('#options_value2').append($(this).val() + (`<input class="number" type="number" value="0" max="${this.value}" /><br>`));
});
$('.options_sum span').text(0);
});
$('#options_value2').on('input', function() {
let sum = $('[type="number"]', this).get().reduce((sum, {
valueAsNumber
}) => sum + valueAsNumber, 0)
$('.options_sum span').text(sum);
})
});
</script>
</head>
<body>
<div class="grid_css">
<div class="column_1">
<ul id="accordion">
<li>
<div class="line_All_green">
<div class="sum_value">
<div id="1" class="table-td">
<input type="checkbox" value="11111" id="1_1"><span>A 1</span><noscript>aaa111</noscript>
</div>
<div id="2" class="table-td">
<input type="checkbox" value="22222" id="2_2"><span>B 2</span><noscript>bbb222</noscript>
</div>
<div id="3" class="table-td">
<input type="checkbox" value="33333" id="3_3"><span>C 3</span><noscript>ccc333</noscript>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="column_3" id="column_3">
<div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
<div class="options_value2" id="options_value2">
<p id="options_value2" class="options_value2"></p>
</div>
<button id="button2" class="button2"> Copy </button>
</div>
</div>
</body>
</html>
|
Спасибо.
|
если пока отметил один чекбокс и ввел значение а после отметил другой, занчение в первом обнуляется. Можно это исправить?
|
vasoli,
можно, но это задача для вашего развития, нужно придумать алгоритм, что-то нужно изменить в строке 14. попробуйте описать это словами. алгоритмов может быть много, ваша задача как программиста, мыслить алгоритмами, а потом по алгоритму писать код. ход за вами. |
$('input:checkbox:checked').each(function() {
в этой? |
vasoli,
медитируйте ...
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
let checkboxs = $('.sum_value input:checkbox');
checkboxs.change(function() {
$('#options_value2').html('');
if (this.checked) {
let input = $(`<input class="number" type="number" value="0" max="${this.value}" />`);
$(this).data('input', input);
} else $(this).removeData('input');
checkboxs.each(function(i, checkbox) {
if ($(checkbox).data('input')) $('#options_value2').append([checkbox.value, $(checkbox).data('input'), '<br>']);
})
$('#options_value2').trigger('input');
});
$('#options_value2').on('input', function() {
let sum = $('[type="number"]', this).get().reduce((sum, {
valueAsNumber
}) => sum + valueAsNumber, 0)
$('.options_sum span').text(sum);
})
});
</script>
</head>
<body>
<div class="grid_css">
<div class="column_1">
<ul id="accordion">
<li>
<div class="line_All_green">
<div class="sum_value">
<div id="1" class="table-td">
<input type="checkbox" value="11111" id="1_1"><span>A 1</span><noscript>aaa111</noscript>
</div>
<div id="2" class="table-td">
<input type="checkbox" value="22222" id="2_2"><span>B 2</span><noscript>bbb222</noscript>
</div>
<div id="3" class="table-td">
<input type="checkbox" value="33333" id="3_3"><span>C 3</span><noscript>ccc333</noscript>
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="column_3" id="column_3">
<div class="options_sum" id="options_sum">Sum: <span></span></div>Value:
<div class="options_value2" id="options_value2">
<p id="options_value2" class="options_value2"></p>
</div>
<button id="button2" class="button2"> Copy </button>
</div>
</div>
</body>
</html>
|
Спасибо. Такие задачи значит надо решать переменными?
|
Цитата:
задача решена созданием цифрового input, который сохраняется на всё время пока this.checked. до этого была строка, на основе которой каждый раз создавался новый input. |
медитировал и добавил блокировку определенных чекбоксов если отмечен конкретный чекбокс. блокировка работает а ранее сгенерированы инпут не удаляется. где искать решение? в новом коде или в вашем?
const masterCheckbox11111 = document.querySelector('input[type="checkbox"][id="11111"]');
const slaveCheckboxes22222 = document.querySelectorAll('input[type="checkbox"][id*="22222"]');
masterCheckbox11111.addEventListener('change', function () {
slaveCheckboxes22222.forEach(checkbox => {
checkbox.checked = false;
checkbox.disabled = masterCheckbox11111.checked;
});
});
|
vasoli,
const masterCheckbox11111 = document.querySelector('input[type="checkbox"][id="11111"]');
const slaveCheckboxes22222 = document.querySelectorAll('input[type="checkbox"][id*="22222"]');
masterCheckbox11111.addEventListener('change', function () {
slaveCheckboxes22222.forEach(checkbox => {
checkbox.checked = false;
checkbox.disabled = masterCheckbox11111.checked;
let input = $(checkbox).data('input');
if(input) {
$(checkbox).removeData('input');
input.remove();
}
});
});
|
как всегда спасибо! продолжаю медитацию
|
| Часовой пояс GMT +3, время: 19:17. |