Как я могу рассчитать сумму значений переключателей с помощью jQuery?

Я пытаюсь создать форму со многими группами, содержащими много переключателей. Когда пользователь выбирает кнопку, я хотел бы вычислить сумму каждого выбранного значения радиокнопки и показать эту сумму пользователю.

Я нашел плагин для jQuery, который будет выполнять вычисления, этот плагин использует атрибут name кнопок для вычисления. Например, он суммирует значения всех кнопок с именем sum.

До сих пор я пробовал два способа настройки этого: в первом методе я создаю скрытое поле для каждой группы, чтобы хранить в нем сумму выбранных значений, это скрытое поле получает значение, но проблема в том, что общая сумма значение не будет обновляться, когда пользователь нажимает кнопку. Мой код выглядит так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <script src="jquery.js" type="text/javascript">
        </script>
        <script src="calc.js" type="text/javascript">
        </script>
        <script src="calc_f.js" type="text/javascript">
        </script>
        <script type="text/javascript">
            function DisplayPrice(price){
                $('#spn_Price').val(price);
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <input type="hidden" id="spn_Price" name="sum" value="">
            <br>
            <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">
            <br>
            <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">
            <br>
            <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">
        </form>
    </body>
</html>

В этом коде во входном теге с именем totalSum значение будет обновляться, но оно не будет обновляться при изменении кнопок.

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

Я не знаю, правильный ли это способ сделать это, я попытался изменить атрибут имени кнопок, когда пользователь нажимает их на sum, но это тоже не сработало!

Вот адрес плагина: http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm

Как я могу это сделать ?


javascript html jquery radio-button
person datisdesign    schedule 24.08.2009    source источник

Ответы (2)


arrow_upward
21
arrow_downward

Плагин шмугин. Избавьтесь от своего onclick и попробуйте следующее:

$("input[type=radio]").click(function() {
    var total = 0;
    $("input[type=radio]:checked").each(function() {
        total += parseFloat($(this).val());
    });

    $("#totalSum").val(total);
});
person Andy Gaskell    schedule 24.08.2009
comment
+1. Вот почему так важно изучить основы языка перед изучением фреймворка. Нет никакой причины использовать плагин для решения этой конкретной проблемы. - person Mark Hurd; 25.08.2009
comment
Как указать имя формы в $("input[type=radio]").click(function() {, чтобы оно принимало только переключатели в определенной форме, а не все на странице? - person Sapphire; 01.10.2012

arrow_upward
2
arrow_downward

Документ без названия

    <script type="text/javascript">
        function DisplayPrice(price){
            var val1 = 0;
            for( i = 0; i < document.form1.price.length; i++ ){
                if( document.form1.price[i].checked == true ){
                    val1 = document.form1.price[i].value;
                }
            }

            var val2 = 0;
            for( i = 0; i < document.form2.price2.length; i++ ){
                if( document.form2.price2[i].checked == true ){
                    val2 = document.form2.price2[i].value;
                }
            }

            var sum=parseInt(val1) + parseInt(val2);
            document.getElementById('totalSum').value=sum;
        }
    </script>
</head>
<body>
    Choose a number:<br>
    <form name="form1" id="form1" runat="server">
        <br>
        <input id="rdo_1" type="radio" value="159" name="price" onclick="DisplayPrice(this.value);">159
        <br>
        <input id="rdo_2" type="radio" value="259" name="price" onclick="DisplayPrice(this.value);">259
        <br>
    </form>

    Choose another number:<br>
    <form name="form2" id="form2" runat="server">
        <br>
        <input id="rdo_1" type="radio" value="345" name="price2" onclick="DisplayPrice(this.value);">345
        <br>
        <input id="rdo_2" type="radio" value="87" name="price2" onclick="DisplayPrice(this.value);">87
        <br>
    </form>
    <input type="text" name="totalSum" id="totalSum" value="" size="2" readonly="readonly">


</body>

The code above will dinamically sum the checked values from both groups. parseInt will convert to integers. Use parseFloat otherwise.

person Community    schedule 24.08.2009