Проверка input[text] + input[checkbox]
Добрый день, уважаемые участники сообщества. Помогите, пожалуйста, новичку JS, но опытному верстальщику, решить проблему.
Суть: есть 4 (n) чекбокса input[checkbox], которые активируют поля для ввода input[text]. В поля для ввода вносится число от 0 до 100 (проверка проходит отдельно, для решения вопроса не требуется). Необходимо: сосчитать количество активных чекбоксов из n доступных, сосчитать сумму чисел активных полей для ввода, высчитать среднее арифметическое и вывести в отдельную переменную. Кроме того, хотелось бы реализацию без кнопок и перезагрузки страницы, чтобы среднее арифметическое обновлялось при каждом изменении полей для ввода. <ul> <li><input type="checkbox" /><input type="text" maxlength="3"/></li> <li><input type="checkbox" /><input type="text" maxlength="3"/></li> <li><input type="checkbox" /><input type="text" maxlength="3"/></li> <li><input type="checkbox" /><input type="text" maxlength="3"/></li> </ul> |
avdotion,
ваши попытки где? |
Мои попытки при решении поставленной задачи
$(document).ready ( function(){
var score;
var prescore;
var sum;
$(".sub-insert").keyup(function() {
if ($("#sub1").prop('checked')) {
sum = sum + 1;
prescore = prescore + ("#sub-insert-1");
}
if ($("#sub2").prop('checked')) {
sum = sum + 1;
prescore = prescore + ("#sub-insert-2");
}
if ($("#sub3").prop('checked')) {
sum = sum + 1;
prescore = prescore + ("#sub-insert-3");
}
if ($("#sub4").prop('checked')) {
sum = sum + 1;
prescore = prescore + ("#sub-insert-4");
}
score = prescore / sum;
});
});
|
$('ul :checked').length
|
сумма, количество и среднее арифметическое выбранных input
avdotion,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
[type="checkbox"]+input{
display: none;
}
:checked+input{
display: inline;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
function calc() {
var sum = [0,0,0];
$(":checked+input").val(function(i, v) {
var num = +v || 0;
num > 100 && (num = 100);
num < 0 && (num = 0);
sum[0] += num;
sum[1] = ++i;
sum[2] = (sum[0]/sum[1]).toFixed(2)
return num||""
});
$(".res").html(sum.join(" "))
}
$('[type="text"]').on("input", calc)
$('[type="checkbox"]').on("click", calc)
});
</script>
</head>
<body>
<ul>
<li><input type="checkbox" /><input type="text" maxlength="3"/></li>
<li><input type="checkbox" /><input type="text" maxlength="3"/></li>
<li><input type="checkbox" /><input type="text" maxlength="3"/></li>
<li><input type="checkbox" /><input type="text" maxlength="3"/></li>
</ul>
<div class="res"></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 11:02. |