Как пересчитать значения при нажатии на клавишу

@~Death_Lord~ · Регистрация: 10.11.2011

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

Добрый вечер я студент, и у меня возникла такая вот задачка:

Мне надо так чтоб при клике на кнопку пересчитывались значения в ячейках Input это значение должно пересчитываться так умножать значение что было на значение INput с name="lol", но это условие должно выполняться только если по соседству во флажке стоит галочка

HTML5

<table class="data" id="celebs" border="1" name="lol">
    <thead>
    <tr>
        <td>1</td>
        <td>Name</td>
        <td><input type="text" value="5" name="AUG[1]"/></td>
        <td><input type="checkbox" name="ChAUG[1]" value="1"/></td>
        <td><input type="text" value="5" name="SEP[1]"/></td>
        <td><input type="checkbox" name="ChSEP[1]" value="1"/></td>
    </tr>
    <tr>
        <td>2</td>
        <td>Name</td>
        <td><input type="text" value="5" name="AUG[2]"/></td>
        <td><input type="checkbox" name="ChAUG[2]" value="1"/></td>
        <td><input type="text" value="5" name="SEP[2]"/></td>
        <td><input type="checkbox" name="ChSEP[2]" value="1"/></td>
    </tr>
    </thead>
    <br>
        <input type="text" value="100" name="lol" />
    <input  type="button" onclick="press()"/>

@Potanin · 18.07.2014, 19:47

Не совсем ясная формулировка задания. То есть в каждом из текстовых инпутов, напротив которого стоит чекбокс в нажатом состоянии, необходимо, чтобы его (текстового инпута) значение умножилось на значение, находящееся в текстовом инпуте с именем lol? Тех инпутов что есть вам достаточно или в последствии их может становиться больше (от этого зависит способ решения)? Последние два инпута не понятно каким образом оказались в таблице вне её строковых или столбиковых элементов. Если я вас правильно понял, то вы хотите получить следующее. Функцию и кнопку смотрите внизу, немного пришлось подправить и код, касающийся таблицы.

Javascript

<table class="data" id="celebs" border="1">
    <thead>
        <tr>
            <td>1</td>
            <td>Name</td>
            <td><input type="text" value="5" name="AUG[1]" /></td>
            <td><input type="checkbox" name="ChAUG[1]" value="1" /></td>
            <td><input type="text" value="5" name="SEP[1]" /></td>
            <td><input type="checkbox" name="ChSEP[1]" value="1" /></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Name</td>
            <td><input type="text" value="5" name="AUG[2]" /></td>
            <td><input type="checkbox" name="ChAUG[2]" value="1" /></td>
            <td><input type="text" value="5" name="SEP[2]" /></td>
            <td><input type="checkbox" name="ChSEP[2]" value="1" /></td>
        </tr>
    </thead>
     </table>
    <br>
    <input type="text" value="100" name="lol" />
<input type="button" onclick="press()" />
    <script>
        function lol()
        {
            var inputs = document.getElementsByTagName('input');
            for (var i = 0; i < inputs.length - 2; i++)
            {
                if ((i % 2 == 0) && (inputs[i + 1].checked)) { inputs[i].value *= document.getElementsByName('lol')[0].value; }
            }
        }
    </script>
    <button onclick="lol()">LOL</button>

@Igsit · 18.07.2014, 20:22

Действительно в html коде есть неточность и судя по всему нужно решение на JQuery?
Если так то если придерживаться такого-же принципа названия текстовых полей и чекбоксов (атрибуты name) то вот Вам вариант (не забудьте подключить JQuery):

Javascript

function press() {
    $("input:text[name!='lol']").each(function () {
        if ( $("input:checked[name='Ch"+$(this).attr('name')+"']").length > 0 ) {
            $(this).val( $(this).val() * $("input:text[name='lol']").val() )
        }
    });
}

а html код поправите сами.

Можно было бы ещё сильно упростить, но я писал именно под Ваш HTML, если его немного переделать то будет ещё проще.

@~Death_Lord~ · 18.07.2014, 22:17 **[ТС]**

Спасибо что решили помочь , а если их все таки может быть много и вверх и вниз
, как этоб можно было реализовать можете наглядно помочь ,на вас одна надежда http://jsfiddle.net/xgM6W/2/

@Potanin · 18.07.2014, 23:18

Вообще, их можно привязать к родительскому элементу table или id'шники им задать удобные, типа a1 a2 a3 и т.д. Скорее всего, здесь подойдёт первый вариант. Программа будет корректно работать при соблюдении следующих условий:
1. Все текстовые инпуты, в которых должно осуществляться умножение, располагаются внутри одной и той же таблицы.
2. Имена ни инпутов, ни чекбоксов, располагающихся в данной таблице, а также инпута с именем 'lol, нигде не повторяются.
3. Имена всех чекбоксов отличаются от имён соответствующих им text'ов только наличием букв Ch впереди, а в остальном являются идентичными.

Javascript

<table class="data" id="celebs" border="1">
        <thead>
            <tr>
                <td>1</td>
                <td>Name</td>
                <td><input type="text" value="5" name="AUG[1]" /></td>
                <td><input type="checkbox" name="ChAUG[1]" value="1" /></td>
                <td><input type="text" value="5" name="SEP[1]" /></td>
                <td><input type="checkbox" name="ChSEP[1]" value="1" /></td>
            </tr>
            <tr>
                <td>2</td>
                <td>Name</td>
                <td><input type="text" value="5" name="AUG[2]" /></td>
                <td><input type="checkbox" name="ChAUG[2]" value="1" /></td>
                <td><input type="text" value="5" name="SEP[2]" /></td>
                <td><input type="checkbox" name="ChSEP[2]" value="1" /></td>
            </tr>
        </thead>
    </table>
    <br>
    <input type="text" value="100" name="lol" />
    <input type="button" onclick="press()" />
    <script>
        function lol() {
            var inputs = document.getElementById('celebs').getElementsByTagName('input');
            for (var i = 0; i < inputs.length; i++)
            {
                if ((inputs[i].type == "text") && (document.getElementsByName('Ch' + inputs[i].name.toString())[0].checked)) inputs[i].value *= document.getElementsByName('lol')[0].value;
            }
        }
    </script>
    <button onclick="lol()">LOL</button>
       </body>

@Igsit · 23.07.2014, 01:36

Ответил в другой ветке которую Вы создали по этому же вопросу, а так Potanin тоже самое говорит, т.е. правила для формирования бесконечного количества инпутов и чекбоксов, просто мой вариант именно на JQuery решение твоей задачи, а смысл тотже

@~Death_Lord~ 7 / 7 / 0 Регистрация: 10.11.2011 Сообщений: 88
	18.07.2014, 22:17 [ТС]	4
	Спасибо что решили помочь , а если их все таки может быть много и вверх и вниз , как этоб можно было реализовать можете наглядно помочь ,на вас одна надежда http://jsfiddle.net/xgM6W/2/ 0

@Igsit 142 / 142 / 63 Регистрация: 18.07.2014 Сообщений: 473
	23.07.2014, 01:36	6
	Ответил в другой ветке которую Вы создали по этому же вопросу, а так Potanin тоже самое говорит, т.е. правила для формирования бесконечного количества инпутов и чекбоксов, просто мой вариант именно на JQuery решение твоей задачи, а смысл тотже 0