Доработать скрипт

@Angelnarina19 · Регистрация: 07.09.2016

Author24 — интернет-сервис помощи студентам

Скажите, пожалуйста, как сделать чтобы скрипт перебирал все cb и input с любым индексом, т.е. нужно оптимизировать.

Javascript

<script> 
function check() { 
    if (document.forma.cb1.checked) { 
        document.forma.input1.value="1"; 
    } else { 
        document.forma.input1.value="0"; 
    } 
} 
</script>

@malafala · 17.10.2016, 16:19

Angelnarina19, Если не сложно больше конкретики, где перебирал, зачем и тому подобное, будет легче понять что вы хотите.

@Angelnarina19 · 18.10.2016, 04:47 **[ТС]**

Подробнее: реализую калькулятор цен, нужно чтобы значения чеквоксов было 1 либо 0, в зависимости от того стоит галка или нет, чтобы задействовать их далее в формулах.

HTML5

<input type="checkbox" onclick="check()" value="0" name="cb1" id="cb1"><input type="hidden"  name="input1">
<input type="checkbox" onclick="check()" value="0" name="cb2" id="cb2"><input type="hidden"  name="input2">
.....
<input type="checkbox" onclick="check()" value="0" name="cb50" id="cb50"><input type="hidden"  name="input50">

далее input участвуют в формулах

Мне нужно чтобы скрипт был для cb1 cb2 cb3 ....cbn, input1 input2 input3 .....inputn, сейчас только для cb1 и для input1

@j2FunOnly · 18.10.2016, 09:18

Angelnarina19, уберите onclick="check()" с чекбоксов. Сделайте по-человечески, повесьте обработчики, когда документ загружен.

Сообщение от Angelnarina19

нужно чтобы значения чеквоксов было 1 либо 0

Когда говорят подробнее, постарайтесь предоставить минимально воспроизводимую проблему в вашем конкретном случае, а не кусок вырванного из контекста кода.
Судя по тому, что вы предоставили, могу предложить такое решение, но наверняка оно вам не подойдет:

Javascript

var check = function () {
  // так чекбоксов?
  this.value = this.checked ? 1 : 0;
  // или текстовых полей рядом с ними?
  this.nextElementSibling.value = this.checked ? 1 : 0;
};
 
document.addEventListener('DOMContentLoaded', function () {
  var checkboxes = document.querySelectorAll('input[id^="cb"]');
  
  // или же необходимо проверять сразу все чекбоксы по клику?
  var checkAll = function () {
    for (var i = 0, l = checkboxes.length; i < l; i++) {
      check.apply(checkboxes[i]);
    };
  };
  
  for (var i = 0, l = checkboxes.length; i < l; i++) {
    checkboxes[i].addEventListener('change', check);
    checkboxes[i].addEventListener('click', checkAll);
  };
});

@Angelnarina19 · 18.10.2016, 13:00 **[ТС]**

Вот что у меня имеется.. Смущает меня скрипт, нужно оптимизировать

HTML5

<script> 
function check() { 
    if (document.forma.cb1.checked) { 
        document.forma.input1.value="1"; 
    } else { 
        document.forma.input1.value="0"; 
    } 
    if (document.forma.cb2.checked) { 
        document.forma.input2.value="1"; 
    } else { 
        document.forma.input2.value="0"; 
    } 
   if (document.forma.cb3.checked) { 
        document.forma.input3.value="1"; 
    } else { 
        document.forma.input3.value="0"; 
    } 
   if (document.forma.cb4.checked) { 
        document.forma.input4.value="1"; 
    } else { 
        document.forma.input4.value="0"; 
    } 
   if (document.forma.cb5.checked) { 
        document.forma.input5.value="1"; 
    } else { 
        document.forma.input5.value="0"; 
    } 
   if (document.forma.cb6.checked) { 
        document.forma.input6.value="1"; 
    } else { 
        document.forma.input6.value="0"; 
    } 
 
} 
</script> 
 
</head>
<body>
 
<form name="forma">
<table>
<tr>
<td width="65%" class="center"><strong>ыпывпчпы</strong></td>
<td width="15%" class="center"><strong>аирчаичич</strong></td>
<td width="20%" class="center" colspan="2"><strong>чаипаисаиса</strong></td>
</tr>
<tr>
<td class="left">рвапвпвпв</td>
<td class="center">вапвапвапв</td>
<td class="center">294,40</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb1" id="cb1"/><input type="hidden"  name="input1"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">63,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="val1" name="cb2" id="cb2"/><input type="hidden" value=" Не отмечено" name="input2"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">533,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="val1" name="cb3" id="cb3"/><input type="hidden" value=" Не отмечено" name="input3"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">533,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="val1" name="cb4" id="cb4"/><input type="hidden" value=" Не отмечено" name="input4"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">533,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="val1" name="cb5" id="cb5"/><input type="hidden" value=" Не отмечено" name="input5"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">533,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="val1" name="cb6" id="cb6"/><input type="hidden" value=" Не отмечено" name="input6"/></td>
</tr>
<tr>
<td class="center" colspan="2"><input type="button" value="Итого" onclick='r.value=(input1.value*294.40)+(input2.value*63.20)+(input3.value*533.20)+(input4.value*533.20)+(input5.value*533.20)+(input6.value*533.20)' />
<td class="center" colspan="2"><output for="input1 input2 input3 input4 input5 input6" name="r">0</output></td>
</tr>
</table></form>
</body>

@j2FunOnly · 18.10.2016, 13:35

Javascript

  function check() {
    var checkboxes = [].slice.call(document.querySelectorAll('input[id^="cb"]'));
    checkboxes.forEach(function (checkbox) {
      checkbox.nextElementSibling.value = checkbox.checked ? 1 : 0;
    });
  };

@Angelnarina19 · 19.10.2016, 10:33 **[ТС]**

Огроменное спасибо за функцию! Есть еще проблема: функция CheckAll() ставит галки или убирает во всех чекбоксах. Проблема в том, что когда галки все выделены то "итого" не считает вообще. Ка я понимаю в функцию CheckAll() надо прописать из функции Check(). Помогите поожалуйста

HTML5

<script>
function CheckAll()
{
  var i;
  for(i=0; i<document.forma.elements.length; i++)
  {
    if(document.forma.ch.checked==true)
    {document.forma.elements[i].checked=true;}
    else {document.forma.elements[i].checked=false;}
  }
}
</script>
 
<script> 
  function check() {
    var checkboxes = [].slice.call(document.querySelectorAll('input[id^="cb"]'));
    checkboxes.forEach(function (checkbox) {
      checkbox.nextElementSibling.value = checkbox.checked ? 1 : 0;
    });
  };  
</script>
  
</head>
<body>
 
<form name="forma">
<table>
<tr>
<td width="65%" class="center"><strong>ыпывпчпы</strong></td>
<td width="15%" class="center"><strong>аирчаичич</strong></td>
<td width="20%" class="center"><strong>чаипаисаиса</strong></td>
<td width="20%" class="center"> <input name="ch" type="checkbox" onClick="CheckAll()"/> </td>
</tr>
<tr>
<td class="left">рвапвпвпв</td>
<td class="center">вапвапвапв</td>
<td class="center">294,40</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb1" id="cb1"/><input type="hidden"  name="input1"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">63,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb2" id="cb2" /><input type="hidden" name="input2"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">533,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb3" id="cb3" /><input type="hidden" name="input3"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">533,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb4" id="cb4" /><input type="hidden" name="input4"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">533,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb5" id="cb5"/><input type="hidden" name="input5"/></td>
</tr>
<tr>
<td class="left">Регистрация проб, подготовка к анализу</td>
<td class="center">проба</td>
<td class="center">533,20</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb6" id="cb6" /><input type="hidden" name="input6"/></td>
</tr>
<tr>
<td class="center" colspan="2"><input type="button" value="Итого" onclick='r.value=(input1.value*294.40)+(input2.value*63.20)+(input3.value*533.20)+(input4.value*533.20)+(input5.value*533.20)+(input6.value*533.20)' />
<td class="center" colspan="2"><output for="input1 input2 input3 input4 input5 input6" name="r">0</output></td>
</tr>
</table></form>

Добавлено через 1 час 2 минуты
Ломаю голову еще над округлением число "r". Можно ли прям onclickи прописать округление без скрипта

HTML5

1	<input type="button" value="Итого" onclick='r.value=(input1.value*294.40)+........

@j2FunOnly · 19.10.2016, 11:23

Сообщение от Angelnarina19

Ка я понимаю в функцию CheckAll() надо прописать из функции Check().

Добавьте в конец CheckAll() вызов check().

Добавлено через 1 минуту

HTML5

1	onclick='r.value=((input1.value294.40)+(input2.value63.20)+(input3.value533.20)+(input4.value533.20)+(input5.value533.20)+(input6.value533.20)).toFixed(2)'

Добавлено через 47 минут
По уму бы переделать совсем, убрать с элементов onclick, повесить всю обработку на onchange, но...

Javascript

function processCheckboxes (callback) {
  var checkboxes = [].slice.call(document.querySelectorAll('input[id^="cb"]'));
  checkboxes.forEach(callback);
};
function CheckAll () {
  var checked = document.forma.ch.checked;
  processCheckboxes(function (checkbox) {
    checkbox.checked = checked;
  });
  check();
};
function check() {
  processCheckboxes(function (checkbox) {
    checkbox.nextElementSibling.value = checkbox.checked ? 1 : 0;
  });
};

@Angelnarina19 · 20.10.2016, 06:54 **[ТС]**

Уважаемый j2FunOnly, я вам очень благодарна за решение моей проблемы!

@Angelnarina19 · 21.10.2016, 07:30 **[ТС]**

У меня еще один камень преткновения: мне надо чтобы было так
если b=0 то a=b+0 иначе a=b+200

HTML5

1	onclick='if (b.value=0) {a.value=b.value+0;} else {a.value=b.value+200;}'

@Balanaar · 21.10.2016, 09:45

Angelnarina19, не забывайте, что есть огромная разница между оператором "=" и оператором "=="

HTML5

1	onclick='if (b.value==0) {a.value=b.value+0;} else {a.value=b.value+200;}'

@Angelnarina19 · 21.10.2016, 10:54 **[ТС]**

Интересно получается, он складывает числа в прямом смысле например a=63.2+200=63.2200, где b=63.2
причем умножение, деление и вычитание работает как надо

@Balanaar · 21.10.2016, 11:08

Angelnarina19, потому что оператор "+" - это не только оператор суммирования чисел, но еще и оператор конкатенации строк. a.value и b.value в нашем случае возвращают тип "строка". Если JS получает для обработки тип данных, не соответствующий ожидаемому (например как в нашем случае, a.value * b.value - вы пытаетесь перемножить две строки), то JS попытается привести типы данных в соответствующие (строка преобразуется в число и затем выполнится действие). В случае с оператором "+" - JS видит, что вы пытаетесь сложить 2 строки. Он их и складывает. Чтобы сложить именно числа, представленные строкой, необходимо сначала преобразовать типы:

Javascript

var a = "63.2";
var b = "200";
alert(a + b); // "63.2200"
alert(parseFloat(a) + parseFloat(b)); // 263.2

parseFloat(x) преобразует строку x в число с плавающей точкой

@Angelnarina19 · 28.10.2016, 06:31 **[ТС]**

Что я не так сделала?
Мне надо чтобы если tm=0 то tms=0 иначе tms=tm+400
и далее если tms=0 и an=0 то tmo=0 иначе tmo=tms+an+600

Javascript

function met() {
var tm=(document.forma.input23.value*259.9)+(document.forma.input24.value*305.4);
var an=(document.forma.input1.value*294.40)+(document.forma.input2.value*100);
if (tm==0 && an==0) 
document.forma.tmo.value=0;} 
else {
{if (tm==0) {tms=0;} else {tms=(parseFloat(tm)+parseFloat(400);}
document.forma.tmo.value=parseFloat(tm)+parseFloat(an)+parseFloat(600);}
}

@Balanaar · 28.10.2016, 08:59

А в чем ошибка то?

@Angelnarina19 · 28.10.2016, 09:04 **[ТС]**

кнопка не реагирует, расчет не происходит, значит где-то ошибка

@Balanaar · 28.10.2016, 09:08

HTML разметку прикрепите. Посмотрим что там у вас

Добавлено через 16 секунд
И что выдает консоль? Молчит?

@Angelnarina19 · 28.10.2016, 09:15 **[ТС]**

HTML5

<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Виды анализов</title>
<script> 
function met() {
var tm=(document.forma.input23.value*259.9)+(document.forma.input24.value*305.4);
var an=(document.forma.input1.value*294.40)+(document.forma.input2.value*100);
if (tm==0 && an==0) 
{document.forma.tmo.value=0;} 
else {
{if (tm==0) {tms=0;} else {tms=(parseFloat(tm)+parseFloat(400);}
document.forma.tmo.value=parseFloat(tm)+parseFloat(an)+parseFloat(600);}
}
</script> 
 
</head>
 
<body>
<form name="forma">
<table border="1" class="no-indent" width="100%">
 
<tr>
<td width="75%">dfgsdgfgd</td>
<td width="20%">cfbdfbdfbdf</td>
<td width="5%" >dfgdfgdfgdfg</td>
</tr>
 
<tr>
<td class="left">gfhgfh</td>
<td class="center">294,40</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb1" id="cb1"/><input type="hidden"  name="input1"/></td>
</tr>
 
<tr>
<td class="left">thfhfghf</td>
<td class="center">100,00</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb2" id="cb2"/><input type="hidden"  name="input2"/></td>
</tr>
 
<tr>
<td class="left" colspan="3" style="font-style:oblique">xdfgdfg</td>
</tr>
 
<tr>
<td class="left">thfgthgfth</td>
<td class="center">259,90</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb23" id="cb23"/><input type="hidden"  name="input23"/></td>
</tr>
 
<tr>
<td class="left">fghgfhgf</td>
<td class="center">305,40</td>
<td class="center"><input type="checkbox" onclick="check()" value="0" name="cb24" id="cb24"/><input type="hidden"  name="input24"/></td>
</tr>
 
<tr>
<td class="center">
<input type="button" value="Итого" onclick='met()' />
<td class="center" colspan="2"><strong><output for="tm an tms input23 input24 input1 input2" name="tmo">0.00</output></strong></td>
</tr>
 
</table></form>
 
</body>
</html>

@Balanaar · 28.10.2016, 09:38

Приведем в относительный порядок код. Исправим несколько синтаксических ошибок:

Javascript

function met() {
  var tm = document.forma.input23.value * 259.9 + document.forma.input24.value * 305.4;
  var an = document.forma.input1.value * 294.40 + document.forma.input2.value * 100;
  if (tm==0 && an==0) document.forma.tmo.value=0; else {
    if (tm==0) tms=0; else tms = tm + 400;
    document.forma.tmo.value = tm + an + 600;
  }
}

Теперь все в порядке?

Добавлено через 9 минут
Это мы решили проблему не реагировавшей кнопки. Теперь по поводу расчетов:
- Все ваши инпуты имеют атрибут value равный 0. Устанавливайте значения там;
- Для input23 и input24 вообще не заданы атрибуты value. Возможно вы имели в виду cb23 и cb24;

@Angelnarina19 · 28.10.2016, 09:41 **[ТС]**

Перемудрила изрядно.... Спасибо большое

все у меня считает

я забыла дабавить еще один скипт для input и cb

@Angelnarina19 0 / 0 / 0 Регистрация: 07.09.2016 Сообщений: 18
	21.10.2016, 10:54 [ТС]	12
	Интересно получается, он складывает числа в прямом смысле например a=63.2+200=63.2200, где b=63.2 причем умножение, деление и вычитание работает как надо 0

@malafala 13 / 13 / 16 Регистрация: 31.12.2015 Сообщений: 85
	17.10.2016, 16:19	2
	Angelnarina19, Если не сложно больше конкретики, где перебирал, зачем и тому подобное, будет легче понять что вы хотите. 0

@Angelnarina19 0 / 0 / 0 Регистрация: 07.09.2016 Сообщений: 18
	20.10.2016, 06:54 [ТС]	9
	Уважаемый j2FunOnly, я вам очень благодарна за решение моей проблемы! 0

@Balanaar 2454 / 1761 / 624 Регистрация: 11.07.2016 Сообщений: 4,051
	28.10.2016, 08:59	15
	А в чем ошибка то? 0

@Angelnarina19 0 / 0 / 0 Регистрация: 07.09.2016 Сообщений: 18
	28.10.2016, 09:04 [ТС]	16
	кнопка не реагирует, расчет не происходит, значит где-то ошибка 0

@Balanaar 2454 / 1761 / 624 Регистрация: 11.07.2016 Сообщений: 4,051
	28.10.2016, 09:08	17
	HTML разметку прикрепите. Посмотрим что там у вас Добавлено через 16 секунд И что выдает консоль? Молчит? 0

@Angelnarina19 0 / 0 / 0 Регистрация: 07.09.2016 Сообщений: 18
	28.10.2016, 09:41 [ТС]	20
	Перемудрила изрядно.... Спасибо большое все у меня считает я забыла дабавить еще один скипт для input и cb 0