Форум

avdotion · #1 (**permalink**) 06.01.2017, 20:30

Добрый день, уважаемые участники сообщества. Помогите, пожалуйста, новичку 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>

рони · #2 (**permalink**) 06.01.2017, 20:37

avdotion,
ваши попытки где?

avdotion · #3 (**permalink**) 07.01.2017, 13:03

$(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;
    
});
});

dd_smol · #4 (**permalink**) 07.01.2017, 14:06

$('ul :checked').length

рони · #5 (**permalink**) 07.01.2017, 15:49

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>

Форум

Справочник

Discord чат

Курсы javascript