Блог

У меня есть длинная страница, на которой задаются вопросы и внизу указывается общий балл.

Если я ввожу числа в текстовые поля, они отлично работают при добавлении к общему итогу, но у меня есть несколько переключателей и выпадающее окно, которые не работают при выборе (т. Е. они не соответствуют общему итогу)

Сценарий:

     $(document).ready(function(){
        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        $(".txt").each(function() {
            $(this).keyup(function(){
                calculateSum();
            });
        });
    });

    function calculateSum() {
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".txt").each(function() {

            //add only if the value is number
            if(!isNaN(this.value) amp;amp; this.value.length!=0) {
                sum  = parseFloat(this.value);
            }
        });
        //.toFixed() method will roundoff the final sum to 0 decimal places
        $("#sum").html(sum.toFixed(0));
    }
  

HTML:

         <p>Select weight:<br />
          Underweight (-1 point)<input class="txt" type="radio" name="weight" value="-1" /><br />
          Normal weight ( 1 point)<input class="txt" type="radio" name="weight" value=" 1" checked="checked" /><br />
          Underweigth (-1 point)<input class="txt" type="radio" name="weight" value="-1" />
        </p>

        <p>Select vision impairment: 
          <select id="heath-status">
            <option class="txt" value="1">Normal and healthy ( 1)</option>
            <option class="txt" value="-1">Mild impairment (-1)</option>
            <option class="txt" value="-2">Moderate impairment (-2)</option>
            <option class="txt" value="-3">Moderate/Severe impairment (-3)</option>
            <option class="txt" value="-4">Severe impairment (-4)</option>
            <option class="txt" value="-5">Severe/Extreme impairment (-5)</option>
            <option class="txt" value="-6">Extreme impairment (-6)</option>
          </select>
          </p>
        <p>Enter number of limbs you have (1 point for each limb): <input class="txt" type="text"/></p>

        <p>Enter number of days per week you exercise (1 point for each day): <input class="txt" type="text"/></p>

        <p>Grand total health score: <span id="sum">0</span></p>
  

Наполовину рабочий пример:http://jsfiddle.net/hMgpM /

http://jsfiddle.net/hMgpM/7/

Здесь есть несколько вещей. Вам нужен не класс для каждого отдельного, <option> а скорее select . Вы суммировали все параметры, а не только выбранный. Аналогично, переключатели необходимо обрабатывать по-разному, чтобы суммировать только выбранные.

Кроме того, вы захотите суммировать не только при вводе текста, но и при выборе переключателя или изменении значения поля выбора. Вы также можете немного почистить это, избавившись от функции-оболочки, поскольку вы можете просто передать функцию напрямую. Кроме того, each был ненужным. При вызове чего-то вроде keyup оно будет привязано ко всем элементам вашего объекта jquery, поэтому нет необходимости выполнять цикл.

 <p>Select weight:<br />
    Underweight (-1 point)<input class="rad" type="radio" name="weight" value="-1" /><br />
    Normal weight ( 1 point)<input class="rad" type="radio" name="weight" value=" 1" checked="checked" /><br />
    Underweigth (-1 point)<input class="rad" type="radio" name="weight" value="-1" />
</p>

<p>Select vision impairment: 
    <select id="heath-status" class="txt">
        <option  value="1">Normal and healthy ( 1)</option>
        <option  value="-1">Mild impairment (-1)</option>
        <option  value="-2">Moderate impairment (-2)</option>
        <option  value="-3">Moderate/Severe impairment (-3)</option>
        <option  value="-4">Severe impairment (-4)</option>
        <option  value="-5">Severe/Extreme impairment (-5)</option>
        <option  value="-6">Extreme impairment (-6)</option>
    </select>
</p>
<p>Enter number of limbs you have (1 point for each limb): <input class="txt" type="text"/></p>

<p>Enter number of days per week you exercise (1 point for each day): <input class="txt" type="text"/></p>

<p>Grand total health score: <span id="sum">0</span></p>
  

 $(document).ready(function() {
    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $("input.txt").keyup(calculateSum);
    $("select.txt").change(calculateSum);
    $(".rad").click(calculateSum);

    calculateSum();
});

function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $(".txt").each(function() {

        //add only if the value is number
        if (!isNaN(this.value) amp;amp; this.value.length != 0) {
            sum  = parseFloat(this.value);
        }
    });

    $(".rad:checked").each(function() {
        sum  = parseFloat(this.value);
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(0));
}
  

Вы могли бы попробовать

 $(document).ready(function(){
    //iterate through each textboxes and add keyup
    //handler to trigger sum event
    $(".txt").each(function() {
        $(this).keyup(function(){
            calculateSum();
        });
    });
});

function calculateSum() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $("input.txt:checked, select .txt:selected, input.txt:not(:radio)").each(function() {
        //add only if the value is number
        if(!isNaN(this.value) amp;amp; this.value.length!=0) {
            sum  = parseInt(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#sum").html(sum.toFixed(0));
}
  

По сути, вы не выбрали правильные поля для суммы.

Измените здесь:http://jsfiddle.net/hMgpM/1 /

Редактировать — чтобы все работало лучше, вы также должны сделать

         $(this).bind("click keyup", function(){
            calculateSum();
        });
  

вместо

         $(this).keyup(function(){
            calculateSum();
        });
  

Поиграйте здесь http://jsfiddle.net/hMgpM/3 /